Angular: use el Renderer 2 para agregar una variable CSS
¿Es posible agregar una variable CSS de estilo en línea usandoRenderer2
?
Intenté lo siguiente pero no funciona.
import { Component, OnChanges, Output, ViewChild, Renderer2, ElementRef, ViewEncapsulation } from '@angular/core';
@Component({
})
export class CollapsibleComponent implements OnChanges {
@ViewChild('collapsibleContent') collapsibleCo,ntent: ElementRef;
constructor(
private renderer: Renderer2
) { }
ngOnChanges() {
this.measureCollapsibleContents()
}
measureCollapsibleContents() {
this.renderer.setStyle(this.collapsibleContent.nativeElement, '--expanded', this.collapsibleContent.nativeElement.firstElementChild.offsetHeight + 'px' )
}
}
'--expanded' no es una propiedad css adecuada, por lo que angular no agregará ningún estilo a mi div.
Si agrego una propiedad css adecuada, funcionará como el código a continuación.
this.renderer.setStyle(this.collapsibleContent.nativeElement, 'top', this.collapsibleContent.nativeElement.firstElementChild.offsetHeight + 'px' )
la salida para mi div será
<div style="top: 160px">...</div>
Me gustaría lograr algo como a continuación
<div style="--expanded: 160px">...</div>
También he intentado[ngStyle]
pero eso tampoco representa ningún valor sino el atributo de estilo.
[ngStyle]="{'--expanded': expandedHeight }"
Salidas a
<div style>...</div>