Sometimes the app that is being developed requires different classes on body of html document for styling each route or page. This can be achieved in Angular 2, Angular 4 and above using the following snippet.


Home Component

...//other code above
export class HomeComponent implements OnInit, OnDestroy {
 ngOnInit(){
    const body = document.getElementsByTagName('body')[0];
    body.classList.add('page-home');
  }

  ngOnDestroy(){
    const body = document.getElementsByTagName('body')[0];
    body.classList.remove('page-home');
  }
...//other code below

Dashboard Component

...//other code above
export class DashboardComponent implements OnInit, OnDestroy {
 ngOnInit(){
    const body = document.getElementsByTagName('body')[0];
    body.classList.add('page-dashboard');
  }

  ngOnDestroy(){
    const body = document.getElementsByTagName('body')[0];
    body.classList.remove('page-dashboard');
  }
...//other code below