Angular 2 Ajout d'un style dynamique à l'hôte

Question

Je souhaite ajouter un style conditionnel à l'élément hôte. par exemple

:host, :host:focus { 
    cursor: pointer; 
} 

:host .disabled { 
    opacity: 0.5; 
    cursor: default; 
} 

j'ai un paramètre d'entrée @input() activé: boolean

P.S. Envelopper mon composant comme <div [class.disabled]="!enabled"> </div> ne suffit pas. Je souhaite désactiver/activer l'élément hôte.

Answer 1

Vous pouvez utiliser avec Renderer, élément d'

@Component({ 
    .... 
}) 
class YouComponent implements OnChanges { 
    constructor(private el: ElementRef, private renderer: Renderer) {} 

    ngOnChanges(changes: SimpleChanges) { 
    if (changes.hasOwnProperty('enabled')) { 
     this.renderer.setElementClass(this.el.nativeElement, 'disabled', {isAdd: !!changes['input'].currentValue}); 
    } 
    } 
} 

Edit: la réponse simplifiée