Angular set css style for :host in ngOnInit

Question

I don't know how to set css style for :host {} in ngOnInit in component. Can use Renderer to set this?

Example:

<app-a *ngFor ="let a in alist" [a] = "a"></app-a>

In ngOnInit app-a i wanna to set width height style by percent for :host of app-a component when in rendered by ngFor?

Can I do it?

Many Thanks.

Answer 1

You can also use @HostBinding decorator like:

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

@Component({
  selector: 'my-app',
  templateUrl: `./app.component.html`
})
export class AppComponent {
  @HostBinding('style.display') display: string;
  @HostBinding('style.width.%') width: number;
  @HostBinding('style.height.px') height: number;

  ngOnInit() {
    this.display = 'block';
    this.width = 50;
    this.height = 500;
  }
}