Built in directives not working on root component

421 Views Asked by Praneet Dixit At 20 October 2024 at 08:04

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.

Original Q&A

There are 2 best solutions below

eko On 12 May 2021 at 08:57 BEST ANSWER

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

Onur Özkır On 11 May 2021 at 19:52

First, of all this is not right way to write even a single word in tag because it behaves as template directive or you can say empty box to be filled by app.component.html content,

The problem maybe that the main element is not part of the component you are applying the style to

You can add this and it should target that component correctly.

:host {
    width: 100%;
    height: 100%;
}

:host is used to address the hosting element (e.g. ).

Built in directives not working on root component

There are 2 best solutions below

Related Questions in ANGULAR

Related Questions in ANGULAR-DIRECTIVE

Related Questions in PROPERTY-BINDING

Trending Questions

Popular # Hahtags

Popular Questions