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

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay