angular - ng-class conditional

Usando una directiva para agregar clase al elemento host

Question

Actualmente estoy aprendiendo Angular 2. Comprendí cómo usar el ElementStyle Angular para establecer un ElementStyle , pero ahora me gustaría usar el método del Renderer :

setElementClass(renderElement: any, className: string, isAdd: boolean) : void

Mi pregunta es ¿cómo puedo importar una clase CSS a mi directiva de atributos? ¿Tengo que convertir mi clase CSS a JSON?

Answer 1

¿Por qué querrías usar la clase Renderer o Renderer2? La forma preferida de hacer esto en una directiva es usar el decorador @HostBinding .

Ejemplo:

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

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

    @HostBinding(''class'')
    className = ''my-directive-css-class'';
}

Answer 2

Ejemplo de cómo usar Renderer y ElementRef para agregar la clase css al elemento.

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

La clase whatever-css se define en un archivo css, al que se hace referencia en html

Answer 3

El OP original preguntaba cómo usar Renderer. He incluido el @HostBinding para la integridad.

Utilizando @HostBinding

Para agregar una clase a un elemento puedes usar @HostBinding

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

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

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

  constructor() {
  }
}

Usando @HostBinding con múltiples clases

Para hacer que las clases múltiples sean más cómodas de usar, puede usar el programa de obtención de ES6 y unirse a las clases antes de devolverlas:

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

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

  @Input(''class'')
  @HostBinding(''class'')
  get elementClass(): string {
      return this._elementClass.join('' '');
  }
  set(val: string) {
      this._elementClass = val.split('' '');
  }

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

Utilizando Renderer

La API de más bajo nivel es Render2 . Renderer2 es útil cuando tiene un conjunto dinámico de clases que le gustaría aplicar a un elemento.

Ejemplo:

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