How to change body class using typescript class (angular2)

Question

How to change body class using typescript class (angular2)

How to change body class via root component?

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

+18

angular styles

user5605068 Jan 06 '16 at 15:21

source share

6 answers

Günter Zöchbauer · Answer 1 · 2016-01-06 15:41

One way that does not depend on the direct manipulation of the DOM is to make the <body> tag an app element using body as a selector and use the host binding to update the application element 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>` } }

Saurabh · Answer 2 · 2016-10-19 09:15

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

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

Alex Paramonov · Answer 3 · 2016-11-05 13:32

We are looking for the best solution, here is my current solution:

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

yanai edri · Answer 4 · 2017-03-02 13:45

i reinstall it using routing - for example, -add to the root-app component this code:

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

and 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 enter into the constructor:

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

Lakin Mohapatra · Answer 5 · 2017-09-19 11:39

Use the code below.

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

Devner · Answer 6 · 2017-05-02 17:48

In case someone needs to add and remove a class from the body only with the active specific component, this can be done, as shown below. In my specific case, I wanted to add the landing page class only when the user lands on the Home Page (View) and removes this class when the 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"); } }

How to change body class using typescript class (angular2)

More articles: