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;
}
Top comments (0)