Aplicar una directiva condicionalmente

Estoy usando Material 2 para agregar md-raised-button . Quiero aplicar esta directiva solo si cierta condición se cumple.

Por ejemplo:

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

Otro ejemplo: creé una forma reactiva dinámica básica en plunker. Estoy usando una formArrayNamedirectiva de forma reactiva para una matriz de controles. Quiero aplicar la formArrayNamedirectiva solo si una condición específica se cumple; de ​​lo contrario, no agregue la formArrayNamedirectiva.

Aquí hay un enlace de plunker .

No sé si puede aplicar directivas basadas en una condición, pero una solución alternativa sería tener 2 botones y mostrarlos en función de una condición .

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

Editar: tal vez esto sea ​​útil.

Si solo necesita agregar un atributo para activar las reglas CSS, puede usar el siguiente método: (esto no crea / destruye dinámicamente una directiva)

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

Aplica lo mismo a tu plunker: tenedor

Actualizar:

Cómo condition ? '' : nullfunciona como valor:

Cuando es la cadena vacía ( '') se convierte attr.md-raised-button="", cuando es nullel atributo no existirá.

Actualización: plunker update: fork (problemas de versión solucionados, tenga en cuenta que la pregunta se basó originalmente en angular 4)

Como ya se señaló, esto no parece ser posible. Una cosa que se puede utilizar para al menos prevenir algunas duplicaciones es ng-template. Esto le permite extraer el contenido del elemento afectado por la ngIframificación.

Si, por ejemplo, desea crear un componente de menú jerárquico utilizando Material angular:

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

Aquí es la directiva aplicada condicionalmente matMenuTriggerFor, que solo debe aplicarse a elementos de menú con niños. El contenido del botón se inserta en ambos lugares a través de ngTemplateOutlet.

Esto puede llegar tarde, pero es un método viable y elegante para aplicar una directiva de forma condicional.

En la clase directiva, cree la variable de entrada:

@Input('myDirective') options: any;

Al aplicar la directiva, establezca la propiedad de aplicación de la variable de entrada:

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

En el método de la directiva, verifique la variable this.options.apply y aplique la lógica de la directiva basada en la condición:

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

    // directive logic
}

Como también han dicho otros, directivesno se puede aplicar dinámicamente.

Sin embargo, si solo desea cambiar md-buttonel estilo de plano a elevado , este

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

haría el truco. Plunker

Esta también podría ser una solución:

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

Funciona para angular 4, ionic 3 como este:

[color]="condition ? 'primary' : ''"donde conditiones una función que decide si esta es una página activa o no. Todo el código se ve así:

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

Actualmente, existe una NOforma de aplicar condicionalmente una directiva a un componente. Esto no es compatible. Los componentes que ha creado se pueden agregar o eliminar condicionalmente.

Ya existe un problema creado para lo mismo con angular2, por lo que también debería ser el caso con angular4.

Alternativamente, puede optar por la opción con ng-if

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

No pude encontrar una buena solución existente, así que construí mi propia directiva que hace esto.

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

Entonces tu html:

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

Quizás ayude a alguien.

En el siguiente ejemplo, tengo el my-button.component.htmly quiero aplicar la *appHasPermissiondirectiva al <button>solo si el roleatributo está establecido.

<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 esa forma no duplicarás el <button>código.

Sí, es posible.

página html con la directiva 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>

directiva

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

}

¡Pasar nulla la directiva lo elimina!

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

Utilizar NgClass

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

ejemplo de condición verdadera:

this.element === 'Today'

o una función booleana

getTruth()

ejemplo completo:

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

Si quieres una clase predeterminada:

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

Tengo otra idea de lo que podrías hacer.

Puede almacenar el html que desea reemplazar en una variable como una cadena y luego agregar / eliminar la directiva como desee, utilizando el bypassSecurityTrustHtmlmétodo de DomSanitizer .

No obtengo una solución limpia, pero al menos no es necesario que repita el código.

Al 18 de enero de 2019, así es como agregué una directiva condicionalmente en Angular 5 y superior. Necesitaba cambiar el color del <app-nav>componente en función de darkMode. Si la página estaba en modo oscuro o no.

Esto funcionó para mí:

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

Espero que esto ayude a alguien.

EDITAR

Esto cambia el valor de un atributo (color) según una condición. Sucede que el color se define mediante una directiva. Entonces, cualquiera que lea esto, no se confunda, esto no está aplicando una directiva condicionalmente (es decir, lo que significa agregar o eliminar una directiva al dom en función de una condición)