angular - template - ¿Cómo agregar "clase" al elemento host?
data binding angular 4 (3)
Así es como lo hice (Angular 7):
En el componente, agregue una entrada:
@Input() componentClass: string = '''';
Luego, en la plantilla HTML del componente, agregue algo como:
<div [ngClass]="componentClass">...</div>
Y finalmente en la plantilla HTML donde instalas el componente:
<root componentClass="someclass someotherclass">...</root>
Descargo de responsabilidad: soy bastante nuevo en Angular, ¡así que podría tener suerte aquí!
No sé cómo agregar a mi componente
<component></component>
un atributo de
clase
dinámica
,
pero dentro de la plantilla html (component.html).
La única solución que encontré es modificar el elemento a través del elemento nativo "ElementRef". Esa solución parece un poco complicada para hacer algo que debería ser muy simple.
Otro problema es que CSS tiene que definirse fuera del alcance del componente, rompiendo la encapsulación del componente.
¿Hay una solución más simple?
Algo así como
<root [class]="..."> .... </ root>
dentro de la plantilla.
La respuesta de Günter es excelente (la pregunta es sobre el atributo de clase dinámica ), pero pensé que agregaría solo para completar ...
Si está buscando una forma rápida y limpia de agregar una o más clases estáticas al elemento host de su componente (es decir, para fines de diseño de temas), puede hacer lo siguiente:
@Component({
selector: ''my-component'',
template: ''app-element'',
host: {''class'': ''someClass1''}
})
export class App implements OnInit {
...
}
Y si usa una clase en la etiqueta de entrada, Angular fusionará las clases, es decir,
<my-component class="someClass2">
I have both someClass1 & someClass2 applied to me
</my-component>
@Component({
selector: ''body'',
template: ''app-element'',
// prefer decorators (see below)
// host: {''[class.someClass]'':''someField''}
})
export class App implements OnInit {
constructor(private cdRef:ChangeDetectorRef) {}
someField: boolean = false;
// alternatively also the host parameter in the @Component()` decorator can be used
@HostBinding(''class.someClass'') someField: boolean = false;
ngOnInit() {
this.someField = true; // set class `someClass` on `<body>`
//this.cdRef.detectChanges();
}
}
De esta manera, no necesita agregar el CSS fuera del componente. CSS como
:host(.someClass) {
background-color: red;
}
funciona desde el interior del componente y el selector solo se aplica si la clase
someClass
se establece en el elemento host.