How do I dynamically change CSS properties of a component host?
I have a component and in it's CSS I have given it a stlye:
:host {
overflow-x: hidden
}
On a button click from child component, I need to add overflow-y: hidden to the host component.
How do I achieve this behavior?
Use the following HostBinding:
@HostBinding('style.overflow-y') overflowY = 'scroll';
This would give the following component:
@Component({
selector: 'my-app',
template: `
<div>
<button (click)="addStyle()">Add Style</button>
<h2>Hello</h2>
</div>`, styles: [
`
:host {
overflow-x: hidden;
height: 50px;
width: 200px;
display: block;
}
`,
],
})
export class App {
name: string;
@HostBinding('style.overflow-y')
overflowY = 'scroll';
constructor() {
}
addStyle() {
this.overflowY = 'hidden';
}
}
If the button changes something in the component source, you can also use :has(..) pseudoselector.
eg.
:host:has(".someclassinside"){...}
