DEV Community

Faisal Ahmed
Faisal Ahmed

Posted on

1

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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more