Structural Directive

👨🏻‍🍳 Nos Workshops ✉️Besoin d'aide ?🔍Code Review

Rechercher…

Les "Structural Directives" permettent de manipuler le DOM en ajoutant ou en retirant des éléments.
Les "Structural Directives" natives les plus utilisées sont ngIf et ngFor.
Les "Structural Directives" sont généralement utilisées en préfixant les directives par un astérisque :
<h1 *ngIf="book != null">{{ book.title }}</h1>
Il s'agit d'un raccourci pour la syntaxe suivante :
<ng-template [ngIf]="book != null">
    <h1>{{ book.title }}</h1>
</ng-template>
Le tag ng-template est un tag particulier qui n'affiche pas les éléments qui y sont contenus mais les rend disponible aux directives appliquées dessus par l'injection de la classe TemplateRef.
La directive ngIf a donc accès au template en injectant la classe TemplateRef ; elle décide ensuite d'insérer ou non ce template dans la vue en fonction de la valeur de l'expression book != null.
export class SomeStructuralDirective {
​
    constructor(
        private _templateRef: TemplateRef,
        private _viewContainerRef: ViewContainerRef
    ) {
    }
    ​
    hide() {
        this._viewContainerRef.clear();
    }
    ​
    show() {
        this._viewContainerRef.createEmbeddedView(this._templateRef);        
    }
​
}
Pour une meilleure maintenabilité et stabilité de vos applications, évitez l'implémentation de "Structural Directives".

Attribute Directive

Pipes

Dernière mise à jour 4yr ago

Copier le lien