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){
+  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

@@ -6,25 +6,22 @@ import { Recipe } from '../cookbook/type';
 })
 export class RecipeService {
   #recipes: Recipe[] = [
-    {id: 0, name: 'crepe1', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    { id: 0, name: 'crepe1', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
-    {id: 1, name: 'crepe2', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    { id: 1, name: 'crepe2', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
-    {id: 2, name: 'crepe3', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    { id: 2, name: 'crepe3', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
-    {id: 3, name: 'crepe4', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    { id: 3, name: 'crepe4', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
-    {id: 4, name: 'crepe5', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    { id: 4, name: 'crepe5', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
-    {id: 5, name: 'crepe6', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    { id: 5, name: 'crepe6', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
-    {id: 6, name: 'crepe7', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    { id: 6, name: 'crepe7', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
-    {id: 7, name: 'crepe8', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    { id: 7, name: 'crepe8', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
-    {id: 8, name: 'crepe9', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    { id: 8, name: 'crepe9', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
-    {id: 9, name: 'crepe10', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    { id: 9, name: 'crepe10', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
-    {id: 10, name: 'crepe11', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    { id: 10, name: 'crepe11', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
-    {id: 11, name: 'crepe12', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: []},
+    { 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: 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: []},
+    { 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,
@@ -8,14 +9,13 @@ import { RecipeService } from '../recipe.service';
   templateUrl: './recipe.component.html',
 })
 export class RecipeComponent {
-  recipe: Recipe = {id: -1, name: '', description: '', image: '', ingredients: []};
+  recipe: Recipe = { id: -1, name: '', description: '', image: '', ingredients: [] };
-  
+
   @Input()
   set id(id: string) {
     this.recipe = this.recipes.get(parseInt(id))!;
   }
 
-  constructor(protected recipes: RecipeService){
+  constructor(protected recipes: RecipeService) {
-  } 
+  }
-
 }

src/app/recipes/recipes.component.ts

@@ -1,29 +1,28 @@
-import {Component, ViewChild,} from '@angular/core';
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
-import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import {MatTableDataSource, MatTableModule} from '@angular/material/table';
+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',
   standalone: true,
-  imports: [MatTableModule, MatPaginatorModule,RouterLink],
+  imports: [MatTableModule, MatPaginatorModule, RouterLink],
   templateUrl: './recipes.component.html',
 })
-export class RecipesComponent {
+export class RecipesComponent implements AfterViewInit {
-  displayedColumns: string[] = ['id','name','description','image'];
+  displayedColumns: string[] = ['id', 'name', 'description', 'image'];
   dataSource = new MatTableDataSource<Recipe>();
 
-  constructor(protected recipes: RecipeService){
+  constructor(protected recipes: RecipeService) {
     this.dataSource = new MatTableDataSource<Recipe>(recipes.getAll());
   }
-  
+
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatPaginator)
+  paginator!: MatPaginator;
 
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
   }
-
 }
-