Search code examples
angulartypescriptbindingcomponents

How to dynamically set component host style Angular 8

I want to dynamically set style for child host component element from parent.

There is a solution to do it individually for each style as:

@HostBinding('style.width') @Input() width = 'auto'

But this way i need to make multiple lines for different styles.

Bellow is a solution to do this with Host binding and input combination.

Solution

  • ngStyle is designated for this.

    <app-button [ngStyle]="{ marginTop: '10px', marginLeft: '50px' }">Some button</app-button>

    Of course, instead of hard coding it into the template like this you could outsource it into the controller.

    https://angular.io/api/common/NgStyle

    PS: Since style already exists on all elements I'm not sure of the behavoiur of your code