Angular6 – Add dynamic class to the body based on route.
Adding dynamic classes to the angular6 based on route.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import { Component, Renderer2 } from '@angular/core'; import { Router, NavigationStart } from '@angular/router'; import './operators'; @Component({ moduleId: module.id, selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], }) export class AppComponent { previousUrl: string; constructor( private renderer: Renderer2, private router: Router ) { this.router.events.subscribe((event) => { if (event instanceof NavigationStart) { if (this.previousUrl) { let arr = this.previousUrl.split('/'); arr.forEach(item=>{ this.renderer.removeClass(document.body, item); }) } let currentUrlSlug = event.url.slice(1) if (currentUrlSlug) { let arr = currentUrlSlug.split('/'); arr.forEach(item=>{ this.renderer.addClass(document.body, item); }) } this.previousUrl = currentUrlSlug; } }); } } |