*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).

src/app.component.html

<button *ngIf="isAvailable">BUY</button>

src/app.component.ts

...
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.

src/app.component.html

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

src/app.component.ts

...
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).

Si le cas ne doit jamais se produire alors il vaut mieux déclencher une erreur bien bruyante plutôt que de camoufler le problème.

src/app.component.html

<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.

src/app.component.html

<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

Nous vous recommandons d'éviter leur utilisation pour des raisons de lisibilité et de maintenabilité.

Pour répondre à ce genre de besoins, Angular propose des solutions bien plus élégantes avec l'injection dynamique de composants par exemple (sujet abordé plus tard dans ce guide).

Chez Wishtack, nous considérons l'usage de "if / else" et de "switch / case" comme des codes smells peu importe le langage. Leur utilisation dans des templates est un code smell encore plus fort.

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

Angular Unit-Testing Workshop - Fondamentaux & TDD [Français]Eventbrite

Angular Unit-Testing Workshop - Fondamentaux & TDD