code1 code1 - 1 year ago 85
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 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';
    }
  }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download