Bump eslint deps

package.json

@@ -46,11 +46,11 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^20.1.1",
-    "@angular-eslint/builder": "^18.3.0",
-    "@angular-eslint/eslint-plugin": "^18.3.0",
-    "@angular-eslint/eslint-plugin-template": "^18.3.0",
-    "@angular-eslint/schematics": "^18.3.0",
-    "@angular-eslint/template-parser": "^18.3.0",
+    "@angular-eslint/builder": "20.1.1",
+    "@angular-eslint/eslint-plugin": "20.1.1",
+    "@angular-eslint/eslint-plugin-template": "20.1.1",
+    "@angular-eslint/schematics": "20.1.1",
+    "@angular-eslint/template-parser": "20.1.1",
     "@angular/cli": "^20.1.1",
     "@angular/compiler-cli": "20.1.2",
     "@angular/language-service": "20.1.2",
@@ -62,7 +62,7 @@
     "@typescript-eslint/eslint-plugin": "8.38.0",
     "@typescript-eslint/parser": "8.38.0",
     "concurrently": "8.2.2",
-    "eslint": "8.57.0",
+    "eslint": "9.31.0",
     "jasmine-core": "5.1.2",
     "jasmine-spec-reporter": "7.0.0",
     "jquery": "3.7.1",

src/app/api-interactions.ts

@@ -1,16 +1,15 @@
 import { each, isEmpty } from 'lodash-es';
 import { SeriesVolume, Comic, MarvelAPISeriesResponse } from './models';
 import { HttpParams, HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 const MARVEL_API_BASE_URL = 'https://gateway.marvel.com/v1/public/';
 const MARVEL_API_KEY_PUBLIC = '46a863fa31f601aacb87dae9cb8f7c45';
 
 @Injectable()
 export class ApiInteractions {
-  constructor(
-    public http: HttpClient,
-  ) { }
+  http = inject(HttpClient);
+
 
   /**
    * @param seriesVolume the series volume object

src/app/app.component.ts

@@ -15,10 +15,18 @@ import {
   sortBy
 } from 'lodash-es';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
-import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { Component, OnInit, ChangeDetectorRef, inject } from '@angular/core';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { ActivatedRoute, Router, UrlTree } from '@angular/router';
-
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatIconModule } from '@angular/material/icon';
+import { CommonModule } from '@angular/common';
+import { MatMenuModule } from '@angular/material/menu';
+import { FormsModule } from '@angular/forms';
+
+import { FilterPipe } from './filter.pipe';
+import { LimitToPipe } from './limitTo.pipe';
 import { InfoModalComponent } from './info-modal/info-modal.component';
 import { ApiInteractions } from './api-interactions';
 import { Collections } from './../database/collections';
@@ -62,20 +70,34 @@ const COLLECTIONS_CONTAINER_HEIGHT = 298;
 const DEFAULT_COMIC_THUMBNAILS_OFFSET_TOP = BODY_PADDING_TOP + DATES_CONTAINER_HEIGHT;
 
 @Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.less'],
-    standalone: false
+  imports: [
+    CommonModule,
+    FilterPipe,
+    FormsModule,
+    LimitToPipe,
+    MatButtonModule,
+    MatIconModule,
+    MatDialogModule,
+    MatIconModule,
+    MatMenuModule,
+    MatTooltip,
+  ],
+  providers: [
+    ApiInteractions,
+  ],
+  selector: 'app-root',
+  styleUrls: ['./app.component.less'],
+  templateUrl: './app.component.html',
 })
 export class AppComponent implements OnInit {
-  constructor(
-    private apiInteractions: ApiInteractions,
-    private breakpointObserver: BreakpointObserver,
-    private changeDetector: ChangeDetectorRef,
-    public dialog: MatDialog,
-    private route: ActivatedRoute,
-    private router: Router,
-  ) {
+  private apiInteractions = inject(ApiInteractions);
+  private breakpointObserver = inject(BreakpointObserver);
+  private changeDetector = inject(ChangeDetectorRef);
+  dialog = inject(MatDialog);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
+  constructor() {
     // detect screen size changes
     this.breakpointObserver.observe([
       "(max-width: 768px)"

src/app/filter.pipe.ts

@@ -1,7 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 @Pipe({
     name: 'filter',
-    standalone: false
 })
 export class FilterPipe implements PipeTransform {
   transform(items: any[], searchText: string): any[] {

src/app/info-modal/info-modal.component.ts

@@ -1,16 +1,16 @@
-import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Component, inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 
 @Component({
-    selector: 'app-info-modal',
-    templateUrl: 'info-modal.component.html',
-    standalone: false
+  imports: [
+    MatDialogModule,
+  ],
+  selector: 'app-info-modal',
+  templateUrl: 'info-modal.component.html',
 })
 export class InfoModalComponent {
-  constructor(
-    public dialogRef: MatDialogRef<InfoModalComponent>,
-    @Inject(MAT_DIALOG_DATA) public data,
-  ) {}
+  dialogRef = inject<MatDialogRef<InfoModalComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
 
   onNoClick(): void {
     this.dialogRef.close();

src/app/limitTo.pipe.ts

@@ -1,7 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 @Pipe({
     name: 'limitTo',
-    standalone: false
 })
 export class LimitToPipe implements PipeTransform {
   transform(items: any[], limit: number = 20): any[] {

src/main.ts

@@ -1,12 +1,18 @@
 import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { ActivatedRoute, provideRouter, Router, withComponentInputBinding } from '@angular/router';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideRouter([], withComponentInputBinding()),
+    provideHttpClient(withInterceptorsFromDi())
+  ],
+});