code1 code1 - 1 year ago 75
CSS Question

How to dynamically change CSS in :host in angular 2?

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?

Answer Source

Here is plnkr


@HostBinding('style.overflow-y') overflowY = 'scroll';

    selector: 'my-app',
    template: `
        <button (click)="addStyle()">Add Style</button>
      </div>`,  styles: [
    :host {
       overflow-x: hidden;
      height: 50px;
  export class App {

     overflowY = 'scroll';

    constructor() {}

    addStyle() {
      this.overflowY= 'hidden';
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download