Les directives sont des composants sans template !
Les directives prédéfinies sont : ngClass, ngStyle, ngFor, ngIf, ngSwitch.
ngClass, ngStyle
Vu dans le chapitre liaison de données.
ngFor
Exemple :
|
1 2 3 4 5 6 7 8 |
<ul> <li *ngFor="let produit of listeProduits"> // Pour chaque produit dans listeProduits, produire un élément li <h2>{{produit.nom}}<h2> <p>{{produit.description}}<p> <p>{{produit.stock}} en stock<p> </li> </ul> |
ngIf
Exemple :
|
1 2 3 4 5 6 7 8 |
<ul> <li *ngFor="let produit of listeProduits"> <h2>{{produit.nom}}<h2> <p>{{produit.description}}<p> <p *ngIf="produit.stock > 0">{{produit.stock}} en stock</p> <p *ngIf="produit.stock === 0">Plus de stock</p> </li> </ul> |
ngSwitch
Exemple :
|
1 2 3 4 5 6 7 |
<span [ngSwitch]="monChoix"> <span *ngSwitchCase="'Fruit'">Orange</span> <span *ngSwitchCase="'Légume'">Carottes</span> <span *ngSwitchCase="'Vêtement'">T-Shirt</span> <span *ngSwitchCase="'Objet'">Table</span> <span *ngSwitchDefault>N'importe</span> </span> |