Appliquer une directive de manière conditionnelle

Question

J'utilise le matériel 2 pour ajouter md-raised-button . Je veux appliquer cette directive uniquement si une certaine condition devient vraie.

Par exemple :

<button md-raised-button="true"></button>

Un autre exemple : J'ai créé un formulaire dynamique réactif de base dans plunker. J'utilise formArrayName d'un formulaire réactif pour un tableau de contrôles. Je veux appliquer formArrayName seulement si une condition spécifique devient vraie, sinon n'ajoutez pas la directive formArrayName directive.

Voici un lien vers le site de l'entreprise .

Answer 1

Si vous avez simplement besoin d'ajouter un attribut afin de déclencher des règles CSS, vous pouvez utiliser la méthode ci-dessous : (ceci ne permet pas de créer/détruire dynamiquement une directive)

<button [attr.md-raised-button]="condition ? '' : null"></button>

J'ai appliqué la même chose à ton plunker : fourchette

Mise à jour :

Comment condition ? '' : null fonctionne comme valeur :

Lorsqu'il s'agit d'une chaîne vide ( '' ), on obtient attr.md-raised-button="" lorsque son null l'attribut n'existera pas.

Mise à jour : mise à jour de plunker : fourchette (problèmes de version corrigés, veuillez noter que la question était initialement basée sur angular 4)

Answer 2

Je ne sais pas si vous pouvez appliquer des directives basées sur une condition, mais une solution de contournement serait d'avoir 2 boutons et les afficher en fonction d'une condition .

<button *ngIf="!condition"></button>
<button *ngIf="condition" md-raised-button></button> 

Edit : peut-être este sera utile.

Answer 3

Comme nous l'avons déjà indiqué, cela ne semble pas possible. Une chose qui peut être utilisée pour au moins éviter une certaine duplication est la suivante ng-template . Cela vous permet d'extraire le contenu de l'élément affecté par l'option ngIf ramification.

Si vous souhaitez par exemple créer un composant de menu hiérarchique à l'aide d'Angular Material :

<!-- Button contents -->
<ng-template #contentTemplate>
    <mat-icon *ngIf="item.icon != null">{{ item.icon }}</mat-icon>
    {{ item.label }}
</ng-template>

<!-- Leaf button -->
<button *ngIf="item.children == null" mat-menu-item
    (click)="executeCommand()"
    [disabled]="enabled == false">
    <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</button>
<!-- Node button -->
<ng-container *ngIf="item.children != null">
    <button mat-menu-item
        [matMenuTriggerFor]="subMenu">
        <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
    </button>

    <mat-menu #subMenu="matMenu">
        <menu-item *ngFor="let child of item.children" [item]="child"></menu-item>
    </mat-menu>
</ng-container>

Ici, la directive appliquée sous condition est matMenuTriggerFor qui ne doit s'appliquer qu'aux éléments de menu comportant des enfants. Le contenu du bouton est inséré aux deux endroits via ngTemplateOutlet .

Answer 4

Cela peut arriver tardivement, mais c'est une méthode viable et élégante pour appliquer une directive de manière conditionnelle.

Dans la classe de directive, créez la variable d'entrée :

@Input('myDirective') options: any;

Lorsque vous appliquez la directive, définissez la propriété apply de la variable d'entrée :

<div [myDirective] = {apply: someCondition}></div>

Dans la méthode de la directive, on vérifie la variable this.options.apply et on applique la logique de la directive en fonction de la condition :

ngAfterViewInit(): void {
    if (!this.options.apply) {
        return;
    }

    // directive logic
}

Answer 5

Comme d'autres l'ont également déclaré, directives ne peut pas être appliquée dynamiquement.

Cependant, si vous voulez simplement basculer md-button du style de plat a soulevé alors ceci

<button md-button [class.mat-raised-button]="isRaised">Toggle Raised Button</button>

ferait l'affaire. Plunker