Format

src/app/app.component.ts

@@ -8,12 +8,11 @@ import { RecipeService } from './recipe.service';
   imports: [RouterOutlet, RouterLink, RouterLinkActive],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
-  providers: [RecipeService]
+  providers: [RecipeService],
 })
 export class AppComponent {
   title = 'tiramisu';
 
   constructor(protected recipes: RecipeService) {
   }
-
 }

src/app/app.config.ts

@@ -1,10 +1,10 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig } from '@angular/core';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideRouter } from '@angular/router';
 import { withComponentInputBinding } from '@angular/router';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes, withComponentInputBinding()), provideAnimationsAsync(), provideAnimationsAsync()]
+  providers: [provideRouter(routes, withComponentInputBinding()), provideAnimationsAsync()],
 };

src/app/recipe.service.ts

@@ -20,11 +20,8 @@ export class RecipeService {
     { id: 11, name: 'crepe12', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
     { id: 12, name: 'crepe13', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
     { id: 13, name: 'crepe14', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
-
   ];
 
-  constructor() {}
-
   getAll(): Recipe[] {
     return this.#recipes;
   }

src/app/recipe/recipe.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { Recipe } from '../../cookbook/type';
 import { RecipeService } from '../recipe.service';
+
 @Component({
   selector: 'app-recipe',
   standalone: true,
@@ -17,5 +18,4 @@ export class RecipeComponent {
 
   constructor(protected recipes: RecipeService) {
   }
-
 }

src/app/recipes/recipes.component.ts

@@ -1,9 +1,9 @@
-import {Component, ViewChild,} from '@angular/core';
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { RecipeService } from '../recipe.service';
-import {RouterLink} from '@angular/router'
+import { RouterLink } from '@angular/router';
 import { Recipe } from '../../cookbook/type';
+import { RecipeService } from '../recipe.service';
 
 @Component({
   selector: 'app-recipes',
@@ -11,7 +11,7 @@ import { Recipe } from '../../cookbook/type';
   imports: [MatTableModule, MatPaginatorModule, RouterLink],
   templateUrl: './recipes.component.html',
 })
-export class RecipesComponent {
+export class RecipesComponent implements AfterViewInit {
   displayedColumns: string[] = ['id', 'name', 'description', 'image'];
   dataSource = new MatTableDataSource<Recipe>();
 
@@ -19,11 +19,10 @@ export class RecipesComponent {
     this.dataSource = new MatTableDataSource<Recipe>(recipes.getAll());
   }
 
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatPaginator)
+  paginator!: MatPaginator;
 
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
   }
-
 }
-