Appliquer une directive sous condition

vous pouvez utiliser la méthode suivante:

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

appliqué la même chose à votre plongeur: fourche

mise à jour:

Comment condition ? '' : null fonctionne comme la valeur:

quand sa chaîne vide ( '' ) devient attr.md-raised-button="" , quand son null l'attribut n'existera pas.

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

cependant, si vous voulez juste basculer md-button 's style de plat à surélevé , puis ce

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

ferait l'affaire. Plunker

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

si vous voulez par exemple créer un composant de menu hiérarchique en utilisant 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'au menu les articles avec les enfants. Le contenu du bouton est inséré aux deux endroits via ngTemplateOutlet .

cela peut être tardif, mais c'est une méthode viable et élégante pour appliquer une directive conditionnellement.

dans la classe directive créer 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érifier pour la variable ceci.option.appliquer et appliquer la logique de la directive basée sur la condition:

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

    // directive logic
}

Actuellement, il y a NO façon d'appliquer conditionnellement une directive à un composant.Ce n'est pas pris en charge.Les composants que vous avez créés peuvent être ajoutés ou supprimés sous condition.

il y a déjà une question créée pour les mêmes avec angular2 , ce devrait donc être le cas avec angular4 aswell.

vous pouvez aussi choisir l'option avec ng-si

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

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>

directive

@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');
    }
  }

}

Ce pourrait être aussi une solution:

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

ça marche pour angular 4, ionic 3 comme ça:

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

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

Je n'ai pas pu trouver une bonne solution existante, donc 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>

Utiliser 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 voulez remplacer dans une variable comme une chaîne de caractères et ensuite ajouter / supprimer la directive de celui-ci comme vous le souhaitez, en utilisant la méthode bypassSecurityTrustHtml de la DomSanitizer .

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