how to change class of body in angular2&typescript project

Question

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 ?

Can you share @Component decorator of your components... – Devansh Dec 20 '16 at 18:49 — Devansh, Dec 20 '16 at 18:49

score 8 · Accepted Answer · answered Dec 20 '16 at 18:52

8

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');

answered Dec 20 '16 at 18:52

Günter Zöchbauer

623,577
216
2,003
1,567

Hi, can you eloborate your answer? I edited post regarding to your answer – TyForHelpDude Dec 20 '16 at 19:37
how can I add class with have multiple values it throws exceptions when I try this document.body.classList.add('login-form login-form-second'); – TyForHelpDude Dec 20 '16 at 19:39
`add('login-form', 'login-form-second');` https://developer.mozilla.org/en/docs/Web/API/Element/classList – Günter Zöchbauer Dec 20 '16 at 20:16
1

@HostBinding('class') siteNavbarSmallClass = 'my-login-class'; works perfect thanks! – TyForHelpDude Dec 20 '16 at 21:20

score 4 · Answer 2 · answered Dec 20 '16 at 18:51

4

One way is to use make the <body> tag the app element by using body as selector and use host-binding to update the app elements classes.

@Component({
   selector: 'body',
   host:     {'[class.someClass]':'someField'}
})
export class AppComponent implements AfterViewInit {
  someField: bool = false;
  // alternatively to the host parameter in `@Component`
  // @HostBinding('class.someClass') someField: bool = false;

  ngAfterViewInit() {
    someField = true; // set class `someClass` on `<body>`
  }
}

answered Dec 20 '16 at 18:51

Devansh

1,277
1
13
19

Can you explain what did you do here? Is this a new component with a selector 'body'? or did you change the AppComponent to be the body?? Please add some additional explanations. I want to make this code valid: `` how does you answer make this work? – Gil Epshtain Jun 02 '20 at 10:49
@GilEpshtain As it was written 4-years ego, I was learning Angular2. What I remember it that changes the selector to `body` of `AppComponent` and `` this will add your class to the `body` element. Thanks for your concern I also wanted that valid code should be their. – Devansh Jun 02 '20 at 17:12

score 2 · Answer 3 · answered Mar 20 '19 at 12:14

2

You can also use Renderer2 to modify the body class.

renderer.addClass(document.body, "myClass");

or

renderer.removeClass(document.body, "myClass");

answered Mar 20 '19 at 12:14

Adrian Ber

20,474
12
67
117

how to change class of body in angular2&typescript project

3 Answers3

Linked