Appliquer une directive sous condition

J'utilise le matériau 2 pour ajouter md-raised-button. Je ne veux appliquer cette directive que si certaines conditions deviennent vraies.

Par exemple:

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

Autre exemple: j'ai créé une forme réactive dynamique de base dans plunker. J'utilise une formArrayNamedirective de forme réactive pour un tableau de contrôles. Je veux appliquer la formArrayNamedirective uniquement si une condition spécifique devient vraie, sinon n'ajoutez pas de formArrayNamedirective.

Voici un lien de plunker .

Je ne sais pas si vous pouvez appliquer des directives basées sur une condition, mais une solution de contournement consisterait à 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 que ce sera utile.

Si vous avez juste besoin d'ajouter un attribut pour déclencher des règles CSS, vous pouvez utiliser la méthode ci-dessous: (cela ne crée / détruit pas dynamiquement une directive)

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

Appliqué la même chose à votre plunker: fourchette

Mettre à jour:

Comment condition ? '' : nullfonctionne comme valeur:

Quand c'est la chaîne vide ( '') il devient attr.md-raised-button="", quand c'est nulll'attribut n'existera pas.

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

Comme indiqué précédemment, cela ne semble pas possible. Une chose qui peut être utilisée pour au moins éviter une certaine duplication est ng-template. Cela vous permet d'extraire le contenu de l'élément affecté par le ngIfbranchement.

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

<!-- 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 conditionnellement est matMenuTriggerFor, qui ne doit être appliquée qu'aux éléments de menu avec enfants. Le contenu du bouton est inséré aux deux endroits via ngTemplateOutlet.

Cela peut arriver tardivement, mais c'est une méthode viable et élégante pour appliquer une directive sous condition.

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

@Input('myDirective') options: any;

Lors de l'application de 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, vérifiez la variable this.options.apply et appliquez la logique directive basée sur la condition:

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

    // directive logic
}

Comme d'autres l'ont également indiqué, directivesne peut pas être appliqué dynamiquement.

Cependant, si vous voulez simplement faire basculer md-buttonle style de plat à surélevé , alors ce

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

ferait l'affaire. Plunker

Cela pourrait aussi être une solution:

[md-raised-button]="condition ? 'true' : ''"

Cela fonctionne pour angulaire 4, ionique 3 comme ceci:

[color]="condition ? 'primary' : ''"où conditionest une fonction qui décide s'il s'agit d'une page active ou non. L'ensemble du code ressemble à ceci:

<button *ngFor="let page of ..." [color]="isActivePage(page) ? 'primary' : ''">{{ page.title }}</button>

Actuellement, il existe un NOmoyen d'appliquer conditionnellement une directive à un composant.Cela n'est pas pris en charge.Les composants que vous avez créés peuvent être ajoutés ou supprimés de manière conditionnelle.

Il y a déjà un problème créé pour le même avec angular2, donc cela devrait être le cas avec angular4 également.

Vous pouvez également opter pour l'option avec ng-if

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

Je n'ai pas pu trouver une bonne solution existante, alors j'ai construit ma propre directive qui fait cela.

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[dynamic-attr]'
})
export class DynamicAttrDirective {
  @Input('dynamic-attr') attr: string;
  private _el: ElementRef;

  constructor(el: ElementRef) {
    this._el = el;
  }

  ngOnInit() {
    if (this.attr === '') return null;
    const node = document.createAttribute(this.attr);
    this._el.nativeElement.setAttributeNode(node);
  }
}

Puis votre html:

<div dynamic-attr="{{hasMargin: 'margin-left' ? ''}}"></div>

Peut-être que cela aidera quelqu'un.

Dans l'exemple ci-dessous, j'ai le my-button.component.htmlet je veux appliquer la *appHasPermissiondirective au <button>uniquement si l' roleattribut est défini.

<ng-container *ngIf="role; else buttonNoRole" >
  <ng-container *appHasPermission="role">
    <!-- button with *appHasPermission -->
    <ng-template *ngTemplateOutlet="buttonNoRole;"></ng-template>
  </ng-container>
</ng-container>

<ng-template #buttonNoRole>
  <!-- button without *appHasPermission -->
  <button
    mat-raised-button type="button"
    [color]="color"
    [disabled]="disabled"
    [(appClickProgress)]="onClick"
    [key]="progressKey">
    <mat-icon *ngIf="icon">{{ icon }}</mat-icon> {{ label }}
  </button>
</ng-template>

De cette façon, vous ne dupliquez pas le <button>code.

Oui c'est possible.

page html avec la directive appActiveAhover :)

  <li routerLinkActive="active" #link1="routerLinkActive">
        <a [appActiveAhover]='link1.isActive?false:true' routerLink="administration" [ngStyle]="{'background':link1.isActive?domaindata.get_color3():none}">
          <i class="fa fa-users fa-lg" aria-hidden="true"></i> Administration</a>
      </li>
      <li  routerLinkActive="active" #link2="routerLinkActive">
        <a [appActiveAhover]='link2.isActive?false:true' routerLink="verkaufsburo" [ngStyle]="{'background':link2.isActive?domaindata.get_color3():none,'color':link2.isActive?color2:none}">
          <i class="fa fa-truck fa-lg" aria-hidden="true"></i> Verkaufsbüro</a>
      </li>
      <li  routerLinkActive="active" #link3="routerLinkActive">
        <a [appActiveAhover]='link3.isActive?false:true' routerLink="preisrechner" [ngStyle]="{'background':link3.isActive?domaindata.get_color3():none}">
          <i class="fa fa-calculator fa-lg" aria-hidden="true" *ngIf="routerLinkActive"></i> Preisrechner</a>
      </li>

directif

@Directive({
  selector: '[appActiveAhover]'
})
export class ActiveAhoverDirective implements OnInit {
  @Input() appActiveAhover:boolean;
  constructor(public el: ElementRef, public renderer: Renderer, public domaindata: DomainnameDataService) {
}

  ngOnInit() {
  }

  @HostListener('mouseover') onMouseOver() {
    if(this.appActiveAhover){
      this.renderer.setElementStyle(this.el.nativeElement, 'color', this.domaindata.domaindata.color2);
    }
  }

  @HostListener('mouseout') onMouseOut() {
    if(this.appActiveAhover){
      this.renderer.setElementStyle(this.el.nativeElement, 'color', 'white');
    }
  }

}

Passer nullà la directive le supprime!

<button md-raised-button="condition ? true : null"></button>

Utilisation NgClass

[ngClass]="{ 'mat-raised-button': trueCondition }"

exemple de condition vraie:

this.element === 'Today'

ou une fonction booléenne

getTruth()

exemple complet:

  <button [ngClass]="{ 'mat-raised-button': trueCondition }">TEXT</button>

Si vous voulez une classe par défaut:

  <button [ngClass]="{ 'mat-raised-button': trueCondition, 'default-class': !trueCondition }">TEXT</button>

J'ai une autre idée de ce que vous pourriez faire.

Vous pouvez stocker le html que vous souhaitez remplacer dans une variable sous forme de chaîne, puis y ajouter / supprimer la directive comme vous le souhaitez, en utilisant la bypassSecurityTrustHtmlméthode du DomSanitizer .

Je n'ai pas pour résultat une solution propre mais au moins vous n'avez pas besoin de répéter le code.

Au 18 janvier 2019, c'est ainsi que j'ai ajouté une directive conditionnelle dans Angular 5 et au-dessus. J'avais besoin de changer la couleur du <app-nav>composant en fonction dedarkMode . Si la page était en mode sombre ou non.

Cela a fonctionné pour moi:

<app-nav [color]="darkMode ? 'orange':'green'"></app-nav>

J'espère que ça aidera quelqu'un.

ÉDITER

Cela modifie la valeur d'un attribut (couleur) en fonction d'une condition. Il arrive juste que la couleur soit définie à l'aide d'une directive. Donc, si vous lisez ceci, ne soyez pas confus, il ne s'agit pas d'appliquer une directive de manière conditionnelle (c'est-à-dire d'ajouter ou de supprimer une directive au dom en fonction d'une condition)