Search code examples
angularangular-directiveproperty-binding

Built in directives not working on root component

In my app, the root component is app-root. When I set property bindings like

<body>
    <app-root [style.display]="'none'"></app-root>
</body>

the bindings are just ignored. I get no error either in my terminal or the console. The same happens with

<body>
    <app-root [ngClass]="'someClass'"></app-root>
</body>

These work fine with other nested components, like

<head-comp [ngClass]="'someClass'"></head-comp>

but not with my root component.

I have tried restarting the server and refreshing the page many times but issue is still there.

Solution

  • You can achieve it like this:

    export class AppComponent {
  @HostBinding('class') get class() {
    if (false) {
      return 'do not hide';
    }
    return 'hide';
  }

    :host.hide {
  display: none;
}

    Stackblitz link