Développez des applications Web avec Angular

Ce sont des directives qui, comme leur nom l'indique, modifient la structure du document.  Dans ce chapitre, vous allez en découvrir deux (il en existe d'autres) :  *ngIf  , pour afficher des données de façon conditionnelle, et  *ngFor , pour itérer des données dans un array, par exemple.

*ngIf

Un component auquel on ajoute la directive  *ngIf="condition"  ne s'affichera que si la condition est "truthy" (elle retourne la valeur  true  où la variable mentionnée est définie et non-nulle), comme un statement  if  classique.

Pour une démonstration simple, ajoutez une  <div>  rouge qui ne s'affichera que si l'appareil est éteint :

<li class="list-group-item">
  <div style="width:20px;height:20px;background-color:red;" 
       *ngIf="appareilStatus === 'éteint'"></div>
  <h4>Appareil : {{ appareilName }} -- Statut : {{ getStatus() }}</h4>
  <input type="text" class="form-control" [(ngModel)]="appareilName">
</li>

*ngFor

Lorsque l'on ajoute la directive  *ngFor="let obj of myArray"  à un component, Angular itérera l'array  myArray  et affichera un component par objet  obj .  Pour en comprendre l'utilisation, je vous propose de modifier la façon dont votre application génère des appareils électriques.

On peut imaginer que votre application récupère, depuis un serveur, un array contenant tous les appareils et leurs états.  Pour l'instant, créez cet array directement dans  AppComponent  :

export class AppComponent {
  isAuth = false;

  appareils = [
    {
      name: 'Machine à laver',
      status: 'éteint'
    },
    {
      name: 'Frigo',
      status: 'allumé'
    },
    {
      name: 'Ordinateur',
      status: 'éteint'
    }
  ];

  constructor() {

Vous avez un array avec trois objets, chaque objet ayant une propriété  name  et une propriété  status .  Vous pourriez même créer une interface ou une class TypeScript  Appareil , mais dans ce cas simple ce n'est pas nécessaire.

Maintenant la magie  *ngFor  :

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h2>Mes appareils</h2>
      <ul class="list-group">
        <app-appareil  *ngFor="let appareil of appareils"
                       [appareilName]="appareil.name"
                       [appareilStatus]="appareil.status"></app-appareil>
      </ul>
      <button class="btn btn-success"
              [disabled]="!isAuth"
              (click)="onAllumer()">Tout allumer</button>
    </div>
  </div>
</div>

Le statement  let appareil of appareils , comme dans une for loop classique, itère pour chaque élément  appareil  (nom arbitraire) de l'array  appareils  .  Après cette directive, vous pouvez maintenant utiliser l'objet  appareil , dont vous connaissez la forme, à l'intérieur de cette balise HTML.  Vous pouvez donc utiliser le property binding, et y passer les propriétés  name  et  status  de cet objet.

À la différence des directives structurelles, les directives par attribut modifient le comportement d'un objet déjà existant.  Vous avez déjà utilisé une directive de ce type sans le savoir : la directive  ngModel  que vous avez employée pour le two-way binding, qui modifie la valeur du  <input>  et répond à tout changement qu'on lui apporte.  Je vais vous montrer deux autres exemples très utiles :  ngStyle  et  ngClass , qui permettent d'attribuer des styles ou des classes de manière dynamique.

ngStyle

Cette directive permet d'appliquer des styles à un objet du DOM de manière dynamique. Imaginez que, pour l'application des appareils électriques, vous souhaitiez modifier la couleur du texte selon si l'appareil est allumé ou non, disons vert pour allumé, rouge pour éteint.   ngStyle  vous permet de faire cela :

<h4 [ngStyle]="{color: getColor()}">Appareil : {{ appareilName }} -- Statut : {{ getStatus() }}</h4>

ngStyle  prend un objet JS de type clé-valeur, avec comme clé le style à modifier, et comme valeur la valeur souhaitée pour ce style. Ici, vous faites appel à une fonction getColor()  dans  AppareilComponent  que vous allez maintenant créer :

getColor() {
    if(this.appareilStatus === 'allumé') {
      return 'green';
    } else if(this.appareilStatus === 'éteint') {
      return 'red';
    }
}

Cette fonction retourne la valeur  'green'  si l'appareil est allumé, et  'red'  s'il est éteint, modifiant ainsi la couleur du texte dans le template.

ngClass

Au-delà de modifier des styles directement, il peut être très utile d'ajouter des classes CSS à un élément de manière dynamique.  Comme  ngStyle ,  ngClass  prend un objet clé-valeur, mais cette fois avec la classe à appliquer en clé, et la condition en valeur.

Pour cet exemple, je vous propose d'appliquer des classes Bootstrap à la balise  <li>  en fonction du statut de l'appareil :

<li [ngClass]="{'list-group-item': true,
                'list-group-item-success': appareilStatus === 'allumé',
                'list-group-item-danger': appareilStatus === 'éteint'}">
  <div style="width:20px;height:20px;background-color:red;"
       *ngIf="appareilStatus === 'éteint'"></div>
  <h4 [ngStyle]="{color: getColor()}">Appareil : {{ appareilName }} -- Statut : {{ getStatus() }}</h4>
  <input type="text" class="form-control" [(ngModel)]="appareilName">
</li>

Angular appliquera donc systématiquement la classe  list-group-item , et selon le contenu de la variable  appareilStatus , appliquera l'une ou l'autre des deux autres classes.  Vous pouvez bien évidemment créer vos propres classes et les utiliser ; j'ai simplement choisi des classes Bootstrap pour simplifier l'explication.