#13: 🚧 Refactoriser App

Nous allons effectuer un petit refactoring car l'app-root ne devrait pas avoir un template aussi grand et toute cette logique. Il devrait simplement appeler un autre composant qui s'en occupera.

• Créer un composant nommé list-manager avec la commande suivante:

ng g c list-manager

• Déplacer le code du composant app-root vers list-manager.

• Vous pouvez garder le titre dans app-root, et lui donner une belle valeur.

• Attention à ne pas changer le nom de la classe du composant list-manager!

src/app/app.component.ts

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'My To-Do List App';
}

src/app/app.component.html

    <h1>
      Welcome to {{ title }}!
    </h1>

src/app/list-manager/list-manager.component.ts

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { InputButtonUnitComponent } from '../input-button-unit/input-button-unit.component';
import { TodoItem } from '../interfaces/todo-item';
import { TodoItemComponent } from '../todo-item/todo-item.component';

@Component({
  selector: 'app-list-manager',
  standalone: true,
  imports: [CommonModule, InputButtonUnitComponent, TodoItemComponent],
  template: './list-manager.component.html',
  styleUrls: ['./list-manager.component.scss']
})
export class ListManagerComponent {
  todoList: TodoItem[] = [
    {title: 'install NodeJS'},
    {title: 'install Angular CLI'},
    {title: 'create new app'},
    {title: 'serve app'},
    {title: 'develop app'},
    {title: 'deploy app'},
  ];

  addItem(title: string): void {    
    this.todoList.push({ title });
  }
}

src/app/list-manager/list-manager.component.html

    <app-input-button-unit (submit)="addItem($event)"></app-input-button-unit>

    <ul>
        <li *ngFor="let todoItem of todoList">
          <app-todo-item [item]="todoItem"></app-todo-item>
        </li>
    </ul>

• utilisez le nouveau composant à partir du template app-root et importer le :

src/app/app.component.html

    <h1>
      Welcome to {{ title }}!
    </h1>

    <app-list-manager></app-list-manager>

Voilà! Nous pouvons continuer.

💾 Pusher votre code sur GitHub

Committez tous vos changements en exécutant cette commande dans votre répertoire de projet.

git add -A && git commit -m "votre message de commit"

Pusher vos changements sur GitHub en exécutant cette commande dans votre répertoire de projet.

git push