*ngIf

Alors que le template interpolation et le property binding permettent de modifier l'affichage et le contenu, ils ne permettent pas de modifier la structure du DOM en ajoutant ou en retirant des éléments par exemple.

Pour remédier à cette limitation, Angular fournit des directives structurelles qui permettent de modifier la structure du DOM.

L'une de ces directives les plus utilisées est le ngIf.

Si l'expression associée à la directive est "falsy" alors l'élément et son contenu sont retirés du DOM (ou jamais ajoutés).

<button *ngIf="isAvailable">BUY</button>
...
export class AppComponent {
    isAvailable = false;
}

*ngIf vs "safe navigation operator"

Les expressions utilisées à l'intérieur ne sont donc jamais évaluées et dans certains cas cela évite certaines erreurs.

<div>
    <span>{{ book.name }}</span>
</div>
...
export class AppComponent {
    book = null;
}
TypeError: Cannot read property 'name' of undefined

Il suffit alors d'utiliser ngIf pour retirer tout le bloc (si cela est nécessaire).

<div *ngIf="book">
    <span>{{ book.name }}</span>
</div>

Angular propose également une opérateur de "safe navigation" qu'il vaut mieux éviter car les éléments sont présents dans le DOM mais vides et cela peut avoir des impacts sur l'affichage et le styling.

<div>
    <span>{{ book?.name }}</span>
</div>

switch / case & if / then / else

Angular propose des directives pour implémenter des "switch / case" et des "if / then / else" dans les templates.

https://angular.io/api/common/NgIf https://angular.io/api/common/NgSwitch

Prochains workshops : 10% de réduction avec le code GUIDEANGULAR

Angular Unit-Testing Workshop - Fondamentaux & TDD

Dernière mise à jour