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.
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;
}
}
You usually set styles in a declarative way in the component decorator:
@Component({
styles: [':host { display: block; }']
});
export class AppComponent {}
But if you really need to do that from ngOnInit, you can insert the host element and use renderer:
export class AppComponent {
constructor(private host: ElementRef, private renderer: Renderer2) { }
ngOnInit() {
this.renderer.setStyle(this.host.nativeElement, 'display', 'block');
}
@Component({ styles: [...], styleUrls: [...]}). You can set/remove classes or attributes inngOnInit()to make different parts of your styles apply depending on these classes or attributes.