Aplicar uma diretiva condicionalmente

Estou usando o Material 2 para adicionar md-raised-button. Desejo aplicar esta diretiva apenas se certa condição se tornar verdadeira.

Por exemplo:

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

Outro exemplo: criei uma forma reativa dinâmica básica no plunker. Estou usando uma formArrayNamediretiva de forma reativa para uma série de controles. Quero aplicar a formArrayNamediretiva apenas se uma condição específica se tornar verdadeira, caso contrário, não adicione a formArrayNamediretiva.

Aqui está um link de êmbolo .

Não sei se você pode aplicar diretivas com base em uma condição, mas uma solução alternativa seria ter 2 botões e exibi-los com base em uma condição .

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

Editar: talvez isso seja útil.

Se você só precisa adicionar um atributo para acionar as regras CSS, pode usar o método a seguir: (isso não cria / destrói dinamicamente uma diretiva)

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

Aplicado o mesmo ao seu êmbolo: garfo

Atualizar:

Como condition ? '' : nullfunciona como o valor:

Quando é a string vazia ( ''), torna-se attr.md-raised-button="", quando é nullo atributo não existirá.

Atualização: atualização do plunker: fork (problemas de versão corrigidos, observe que a questão foi originalmente baseada no angular 4)

Como já foi observado, isso não parece ser possível. Uma coisa que pode ser usada para evitar pelo menos alguma duplicação é ng-template. Isso permite que você extraia o conteúdo do elemento afetado pela ngIframificação.

Se você, por exemplo, deseja criar um componente de menu hierárquico usando 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>

Aqui, a diretiva aplicada condicionalmente é matMenuTriggerFor, que só deve ser aplicada a itens de menu com filhos. O conteúdo do botão é inserido em ambos os lugares via ngTemplateOutlet.

Isso pode chegar tarde, mas é um método viável e elegante para aplicar uma diretiva condicionalmente.

Na classe de diretiva, crie a variável de entrada:

@Input('myDirective') options: any;

Ao aplicar a diretiva, defina a propriedade apply da variável de entrada:

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

No método da diretiva, verifique a variável this.options.apply e aplique a lógica da diretiva com base na condição:

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

    // directive logic
}

Como outros também afirmaram, directivesnão pode ser aplicado dinamicamente.

No entanto, se você quiser apenas alternar md-buttono estilo de plano para elevado , então

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

faria o truque. Plunker

Esta também pode ser uma solução:

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

Está funcionando para angular 4, iônico 3 assim:

[color]="condition ? 'primary' : ''"onde conditioné uma função que decide se esta é uma página ativa ou não. Todo o código se parece com isto:

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

Atualmente, existe uma NOmaneira de aplicar condicionalmente uma diretiva a um componente. Isso não é suportado. Os componentes que você criou podem ser adicionados ou removidos condicionalmente.

Já existe um problema criado para o mesmo com angular2, então deve ser o caso com angular4 também.

Alternativamente, você pode escolher a opção com ng-if

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

Não consegui encontrar uma boa solução existente, então criei minha própria diretiva que faz isso.

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

Então seu html:

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

Talvez ajude alguém.

No exemplo abaixo, tenho o my-button.component.htmle desejo aplicar a *appHasPermissiondiretiva ao <button>somente se o roleatributo estiver definido.

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

Dessa forma, você não duplica o <button>código.

Sim, é possível.

página html com diretiva 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>

diretriz

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

}

Passar nullpara a diretiva remove isso!

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

Usar NgClass

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

exemplo de condição verdadeira:

this.element === 'Today'

ou uma função booleana

getTruth()

exemplo completo:

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

Se você quiser uma classe padrão:

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

Tive outra ideia sobre o que você poderia fazer.

Você pode armazenar o html que deseja substituir em uma variável como uma string e, em seguida, adicionar / remover a diretiva como desejar, usando o bypassSecurityTrustHtmlmétodo do DomSanitizer .

I não resulta em uma solução limpa, mas pelo menos você não precisa repetir o código.

Em 18 de janeiro de 2019, foi assim que adicionei uma diretiva condicionalmente no Angular 5 e acima. Eu precisava mudar a cor do <app-nav>componente com base em darkMode. Se a página estava no modo escuro ou não.

Isso funcionou para mim:

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

Espero que isso ajude alguém.

EDITAR

Isso altera o valor de um atributo (cor) com base em uma condição. Acontece que a cor é definida por meio de uma diretiva. Portanto, quem estiver lendo isso, não se confunda, isso não é aplicar uma diretiva condicionalmente (ou seja, o que significa adicionar ou remover uma diretiva ao dom com base em uma condição)