DEV Community

Faisal Ahmed
Faisal Ahmed

Posted on

dynamic class added based on different route or path, conditional css

On HTML, Only one class variable added,
On TS, set different class name in different different route in a variable.
On CSS, different different class and style added

dynamicPadding: string = '';

constructor(private router: Router) {}

ngOnInit(): void {
    if (this.router.url.includes('/products/employee-records')) {
      this.dynamicPadding = 'employee-records-page';
    } else if (this.router.url.includes('/products/payroll')) {
      this.dynamicPadding = 'payroll-page';
    } 
     else {
      this.dynamicPadding = '';
    }
  }
Enter fullscreen mode Exit fullscreen mode
<section class="key-benefits" [ngClass]="dynamicPadding">
<h1>Hello World</h1>
</section>
Enter fullscreen mode Exit fullscreen mode
.employee-records-page {
  padding-bottom: 150px !important;
}
.payroll-page {
  padding-bottom: 250px !important;
}


Enter fullscreen mode Exit fullscreen mode

Top comments (0)