How do I change the body class via a typescript class (angular2)

Question

How do I change the body class via the root component?

@Component({ 
   selector: "app", 
   directives: [ROUTER_DIRECTIVES], 
   template: ` 
       <section class="header"> 
           <h1>App</h1>  
           <router-outlet></router-outlet> ` 
})

yes, when a user checked a checkbox I want to change my style of the page. So I want to change the class of the body tag. — , Jan 06 '16 at 15:25
Possible duplicate of [Angular 2.x bind class on body tag](http://stackoverflow.com/questions/34430666/angular-2-x-bind-class-on-body-tag) — Mark Rajcok, Jan 06 '16 at 16:27

score 23 · Answer 1 · edited Oct 29 '16 at 07:23

23

Here you can simple use the native JavaScript in the Angular2 component to change the class of the <body> tag:-

let body = document.getElementsByTagName('body')[0];
body.classList.remove("className");   //remove the class
body.classList.add("className");   //add the class

edited Oct 29 '16 at 07:23

Mr Lister

45,515
15
108
150

answered Oct 19 '16 at 09:15

Saurabh

449
4
7

Still in Angular2 it's not working we will have a separate style class added – Lijo Oct 02 '17 at 06:27
This is not really an angular answer – carkod Jul 12 '18 at 12:09
Angular does still work with plain old JavaScript and DOM access. This may not be the most "Angular" way to do it, but it does work, and works just fine. – iGanja Jul 31 '23 at 18:34

Günter Zöchbauer · Answer 2 · 2017-05-16T13:37:37.403

22

One way that doesn't depend on direct DOM manipulation is, to 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 AppElement 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>`
  }
}

edited May 16 '17 at 13:37

answered Jan 06 '16 at 15:41

Günter Zöchbauer

623,577
216
2,003
1,567

Is it also possible to toggle the someField value from a function on runtime? – Ferdi Emmen Mar 24 '16 at 08:42
@FerdiEmmen that's how it's supposed to be used. – Günter Zöchbauer Mar 24 '16 at 08:43
Ok, how can I toggle the class with a button then? – Ferdi Emmen Mar 24 '16 at 09:01
`template: ''` – Günter Zöchbauer Mar 24 '16 at 09:48
Thank you for your reply but I guess I was not clear enough. I created a plunkr http://plnkr.co/edit/ra8uK5MoYyenhAPYHpLY?p=preview – Ferdi Emmen Mar 24 '16 at 10:12
Thanks for the plunker but it's still unclear what you try to accomplish. What do you expect the `Body` component to do? Just adding it as `providers` to `Toggle`, the component you bootstrap Angular with, doesn't do anything. You also can only attach the root component to the body tag. – Günter Zöchbauer Mar 24 '16 at 10:24
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/107209/discussion-between-ferdi-emmen-and-gunter-zochbauer). – Ferdi Emmen Mar 24 '16 at 10:30
@GünterZöchbauer where to add @Component with `body` selector? – Nikhil Radadiya Jun 19 '17 at 14:27
@NikhilRadadiya It has to be the root component (`AppComponent`). There is no way to do this on any other component. – Günter Zöchbauer Jun 19 '17 at 14:37
@GünterZöchbauer I have `selector: 'app-root'`, If I change to `body` will it work? – Nikhil Radadiya Jun 19 '17 at 14:38
Yes. You should be aware that all `` tag content will be purged when your `AppComponent` gets initialised. So if you have script tags or other content inside ``, you need to move these somewhere else or use another approach to set the class on ``. – Günter Zöchbauer Jun 19 '17 at 14:41

score 6 · Answer 3 · answered Sep 19 '17 at 11:39

6

Use below code.

 ngOnInit() {
    let body = document.getElementsByTagName('body')[0];
    body.classList.add('body-landing');
  }
  
  
  ngOnDestroy() {
    let body = document.getElementsByTagName('body')[0];
    body.classList.remove("body-landing");
  }

answered Sep 19 '17 at 11:39

Lakin Mohapatra

1,097
11
22

2

aleady same answer available plz avoid duplicates – Lijo Oct 02 '17 at 06:01
1

I thought accessing directly element attributes was discouraged? – Romano Jan 30 '19 at 17:51

score 4 · Answer 4 · answered Nov 05 '16 at 13:32

Still looking for a better solution, here is my current workaround:

import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';


@Component({
    selector: 'signup',
    templateUrl: './signup.component.html',
    styleUrls: ['./signup.component.css',], // Where my custom CSS styles for body element declared
    encapsulation: ViewEncapsulation.None, // That will not encapsulate my CSS styles (layout-full, page-signup) from signup.component.css inside component
})


export class SignupComponent implements OnInit, OnDestroy{

    bodyClasses:string = "layout-full page-signup";

    ngOnInit(): void {
        $('body').addClass(this.bodyClasses);
    }
    ngOnDestroy() { 
        $('body').removeClass(this.bodyClasses);
    }


}

if that's jquery a better solution would be just to use any other answer, no point including the whole library — Ben Taliadoros, Feb 27 '18 at 11:28

score 3 · Answer 5 · answered May 02 '17 at 17:48

In case someone needs to add and remove class from body only when a specific component is active, it can be done as below. In my specific case, I wanted to add the "landing-page" class only when user lands on Home Page (View) and remove that class when user navigates to other views:

import {Component, OnInit, OnDestroy} from '@angular/core';

export class HomeComponent implements OnInit {

    constructor() {}

    //Add the class to body tag when the View is initialized
    ngOnInit() {
        let body = document.getElementsByTagName('body')[0];
        body.classList.add("landing-page");
    }

    //Remove the class from body tag when the View is destroyed
    ngOnDestroy() {
        let body = document.getElementsByTagName('body')[0];
        body.classList.remove("landing-page");
    }
}

score 2 · Answer 6 · answered Mar 02 '17 at 13:45

i resove it by use the routeing - like this -add to the root-app component this code :

 this.activeRouter.events.subscribe(
      data => {
        this.className = data.url.split('/').join(' ').trim();
        this.changeBodyClass();
      })

and the body change:

changeBodyClass(){
    if(this.el.nativeElement.parentElement.nodeName === 'BODY'){
       this.el.nativeElement.parentElement.className = this.className ? this.className + '-page' : 'home-page';
    }

you need to inject in the constractor:

constructor(private activeRouter: Router,
              private el: ElementRef)

William Cauich · Answer 7 · 2019-11-29T18:52:57.213

1

 ngOnInit() {
         let body = document.getElementsByTagName('body')[0];
         body.classList.add('nom_class');                                           
 }

For add one or more classes to the element:

body.classList.add('make', 'me', 'look', 'rad');

edited Nov 29 '19 at 18:52

answered Nov 29 '19 at 18:47

William Cauich

151
1
4

How do I change the body class via a typescript class (angular2)

7 Answers7

Linked