Name: dynamic class added based on different route or path, conditional css
Rating: 2.5 (5919 reviews)
Author: webfaisalbd

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

Faisal Ahmed - Oct 10 -

- Dev Community

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 = '';
    }
  }

<section class="key-benefits" [ngClass]="dynamicPadding">
<h1>Hello World</h1>
</section>

.employee-records-page {
  padding-bottom: 150px !important;
}
.payroll-page {
  padding-bottom: 250px !important;
}