Usar uma directiva Angular para adicionar uma classe ao elemento anfitrião

Estou a aprender Angular 2. Eu entendi como usar o Angular Renderer para definir um ElementStyle, mas agora eu gostaria de usar o método Renderer: 

setElementClass(renderElement: any, className: string, isAdd: boolean) : void
A minha pergunta é: Como posso importar uma classe CSS para a minha directiva de atributos? Tenho de converter a minha aula de CSS ao JSON?

Author: Alexander Abakumov, 2016-09-22
Source

3 answers

O OP Original estava a perguntar como usar o renderizador. Incluí a @ HostBinding para completar.

A Usar O @ HostBinding

Para adicionar uma classe a um elemento, poderá usar @HostBinding

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

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {

  @HostBinding('class')
  elementClass = 'custom-theme';

  constructor() {
  }
}

A usar o @ HostBinding com várias classes

Para tornar várias classes mais confortáveis de usar, você pode usar o getter ES6 e juntar as classes juntos antes de devolvê-las: 

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

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {
  protected _elementClass: string[] = [];

  @HostBinding('class')
  get elementClass(): string {
      return this._elementClass.join(' ');
  }

  constructor() {
      this._elementClass.push('custom-theme');
      this._elementClass.push('another-class');
  }
}

Usando O Renderizador

Quanto mais baixa a API é Render2 . O Renderer2 é útil quando você tem um conjunto dinâmico de classes que você gostaria de aplicar a um elemento.

Exemplo:

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

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {

  constructor(private renderer: Renderer2, hostElement: ElementRef) {
    renderer.addClass(hostElement.nativeElement, 'custom-theme');
  }
}
 34
Author: cgatian, 2018-02-23 01:50:25
Porque quer usar a classe Rendererer ou Rendererer2? A forma preferida de o fazer numa directiva é usar o decorador @HostBinding.

Exemplo: 

import { HostBinding } from '@angular/core';

@Directive({
    selector: '[myDirective]'
})
export class MyDirective {

    @HostBinding('class')
    className = 'my-directive-css-class';
}
 6
Author: csnate, 2017-09-13 02:46:32

Exemplo de como usar o renderizador e o ElementRef para adicionar classe css ao elemento.

@Directive({
   selector: '[whatever]'
})
class WhateverDirective {
   constructor(renderer: Renderer, el: ElementRef) {
       renderer.setElementClass(el.nativeElement, 'whatever-css-class', true);
   }
}

A classe seja qual for-css está definida num ficheiro css, que é referenciado no html

 4
Author: jaguwalapratik, 2016-09-23 08:21:41