In this project, the objective is to dynamically change the background-color based on different routes. The goal is to display a specific color for UpcomingComponent while keeping the background-color consistent for all other routes.
The approach involves setting the value in STYLES within the /deep/ .classname for background-color dynamically.
Here is the code snippet:
@Component({
selector: 'app-upcoming',
templateUrl: './upcoming.component.html',
// styleUrls: ['./upcoming.component.css'],
styles: [`
/deep/ .root {
background-color: color;
}`]
})
export class UpcomingComponent implements OnInit {
color: string;
ngOnInit() {
this.updateBackgroundColor();
}
updateBackgroundColor() {
if (window.location.pathname === '/upcoming'){
console.log("Color updated");
this.color = 'purple';
}
}
}