How to dynamically change CSS in: host in angular 2?
How do I dynamically change the host component's CSS properties?
I have a component and in that CSS I gave it a stlye:
:host {
overflow-x: hidden
}
When clicking a button from a child component, I need to add overflow-y: hidden
to the main component.
How do you achieve this behavior?
+3
source to share
1 answer
Here is plnkr https://plnkr.co/edit/VF2WP2daF86wwbmdS5I3?p=preview
Use
@HostBinding('style.overflow-y') overflowY = 'scroll';
@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';
}
}
+5
source to share