I want to make my Side Nav change its color when I scroll down my page in angular I know about host listeners but I'm not getting the idea of how I can implement them in my project.
Sure host listeners is one way to listen for scroll events.
@HostListener('window:scroll', ['$event'])
onWindowScroll($event) {
console.log("scrolling...");
}
But maybe you want to listen for something specific?
<div #element (scroll)="onScroll(element)">
You could then use [NgStyle] to give your sidenav a color based on some value?
myColor = 'red';
onScroll(element) {
console.log("scrolling...");
console.log(element.scrollTop)
if (element.scrollTop > 100) {
this.myColor = 'blue';
}
}
[ngStyle]="{'background-color': myColor }"