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