Quiero hacer que mi Side Nav cambie de color cuando me desplazo hacia abajo en mi página en angular. Sé sobre los oyentes del host, pero no me hago una idea de cómo puedo implementarlos en mi proyecto.
Sure host listeners es una forma de escuchar eventos de desplazamiento.
@HostListener('window:scroll', ['$event']) onWindowScroll($event) { console.log("scrolling..."); }¿Pero tal vez quieras escuchar algo específico?
<div #element (scroll)="onScroll(element)"> ¿Entonces podría usar [NgStyle] para darle a su sidenav un color basado en algún valor?
myColor = 'red'; onScroll(element) { console.log("scrolling..."); console.log(element.scrollTop) if (element.scrollTop > 100) { this.myColor = 'blue'; } } [ngStyle]="{'background-color': myColor }"