Come applicare ngStyle a: elemento host nel componente?

Question

ho qualcosa di simile a questo:

import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'column', 
    template: '<ng-content></ng-content>' 
}) 
export class ColumnComponent { 

    @Input() columnWidth: string = '0';   

    constructor() {} 
} 

e voglio applicare proprietà columnWidth a [ngStyle] su

<ng-content></ng-content> 

elemento padre, per fare qualcosa di simile:

<div [ngStyle]="{'width': columnWidth+'px'}" > .... 

So come applicare lo stile all'elemento host:

:host { /*styles*/ } 

ma non so passare i parametri ad esso.

Answer 1

Non c'è modo di farlo.

Che cosa si può fare è

@HostBinding('style.width') 
width:string = '10px'; 

o

@HostBinding('style.width.px') 
width:number = '10'; 

Il limite principale è che la parte width è fisso e non può essere utilizzato da una variabile.

Un altro modo con piena flessibilità è

constructor(private elRef:ElementRef, private renderer:Renderer) {} 

setStyles() { 
    this.renderer.setElementStyle(this.elRef.nativeElement, 'width', '10px'); 
}