Menu
I have diffirent classes for login page and other pages in application so after user logged in I need to change class of body element. Here how I am trying to accomplish this..
index.html
<body [ngClass]="{
'dashboard site-navbar-small' :isAuthenticated,
'login-form login-form-second page-login-second' :!isAuthenticated
}">
<app-root>Loading...</app-root>
login.component.ts
export class LoginComponent {
@HostBinding('class.login-form.login-form-second.page-login-second')
siteNavbarSmallClass = false;
constructor(private auth:Auth){
this.siteNavbarSmallClass=this.auth.authenticated();
}
}
app.component.ts
export class AppComponent {
@HostBinding('class.dashboard.site-navbar-small')
dashboardClass = false;
constructor(private auth:Auth){
this.dashboardClass=this.auth.authenticated();
}
}
I am trying to bind ngClass directive to isAuthenticated field.. but I doesnt affected. I heard we are not able to change body element via ts, how can I handle it with anyway ?
794
Bindings outside <app-root> are not supported.
What you can do is to use selector: 'body' in you AppComponent and
@HostBinding('class.dashboard')
dashboardClass = false;
@HostBinding('class.site-navbar-small')
siteNavbarSmallClass = false;
...
and then set the properties to true to get the classes added.
or just
document.body.classList.add('dashboard');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
