Aller au contenu principal

TP 3 : Directives (ngIf & ngFor)

Objectifs​

  • Utiliser les directives ngIf et ngFor d'Angular

Instructions​

Étape 1 - Directive ngIf​

  • Dans le composant app.component.ts, créez une variable appelée showAlbumOfTheDay et assignez-lui la valeur true.
    • Au-dessus de l'affichage de albumOfTheDay, ajoutez un bouton qui basculera la variable showAlbumOfTheDay de true à false et vice versa.
    • Il affichera "Cacher" si showAlbumOfTheDay est vrai et "Afficher" si c'est faux.
  • Utilisez la directive ngIf pour afficher albumOfTheDay seulement si la variable showAlbumOfTheDay est vraie.

Étape 2 - Directive ngFor​

  • Créez un nouveau composant appelé album-list et affichez la liste des albums dans le fichier app.component.html, au-dessus du composant album-of-the-day.
  • Dans le composant album-list, créez une variable appelée albums et assignez-y un tableau d'objets qui respectent l'interface Album.
  • Utilisez la directive ngFor pour afficher la liste des albums dans le composant album-list.

À ce niveau, app.component.html devrait ressembler à quelque chose comme :

    <app-albums-list />
    <a class="link" (click)="showAlbumOfTheDay = !showAlbumOfTheDay">{{showAlbumOfTheDay ? 'Cacher' : 'Afficher' }} l'album du jour</a>
    <app-album-of-the-day *ngIf="showAlbumOfTheDay"></app-album-of-the-day>

Instructions - Étape 2​

Il est également possible d'itérer sur une liste d'éléments qui proviendraient d'une fonction. Créons une fonction qui retournera la liste des albums basés sur un terme de recherche.

Déplacer le formulaire de recherche​

  • Déplacez le formulaire de recherche de app.component.html au composant album-list.

[astuce] N'oubliez pas de déplacer la variable searchTerm au composant album-list.

Utiliser un filtre pour filtrer les albums existants​

  • Dans le composant album-list, créez une méthode appelée albumsFiltered qui retournera les albums filtrés basés sur la variable searchTerm.
  • Utilisez la méthode albumsFiltered pour filtrer les albums affichés dans le composant album-list.

[ASTUCE] Voici un exemple de comment cela peut se faire

albumsFiltered(): Album[] {
  return this.albums.filter(album => {
    return album.title.toLowerCase().includes(this.searchTerm.toLowerCase())
  })
}
  <li *ngFor="let album of albumsFiltered()">{{ album.title }}</li>

Ressources​

Liste d&#39;albums