Quiero poder desplazarme a un objetivo cuando se presiona un botón. Estaba pensando en algo como esto.
<button (click)="scroll(#target)">Button</button> Y en mi component.ts un método como.
scroll(element) { window.scrollTo(element.yPosition) }Sé que el código anterior no es válido, pero solo para mostrar lo que estaba pensando. Acabo de empezar a aprender Angular 4 sin experiencia previa en Angular. He estado buscando algo como esto, pero todos los ejemplos están en AngularJs, que difiere mucho de Angular 4
Podrías hacerlo así:
<button (click)="scroll(target)"></button> <div #target>Your target</div>y luego en tu componente:
scroll(el: HTMLElement) { el.scrollIntoView(); }Editar: veo comentarios que indican que esto ya no funciona debido a que el elemento no está definido. Creé un ejemplo de StackBlitz en Angular 7 y todavía funciona. ¿Puede alguien dar un ejemplo donde no funciona?
En Angular 7 funciona perfecto
HTML
<button (click)="scroll(target)">Click to scroll</button> <div #target>Your target</div>en componente
scroll(el: HTMLElement) { el.scrollIntoView({behavior: 'smooth'}); }Así es como lo hice usando Angular 4.
Modelo
<div class="col-xs-12 col-md-3"> <h2>Categories</h2> <div class="cat-list-body"> <div class="cat-item" *ngFor="let cat of web.menu | async"> <label (click)="scroll('cat-'+cat.category_id)">{{cat.category_name}}</label> </div> </div> </div>agregue esta función al Componente.
scroll(id) { console.log(`scrolling to ${id}`); let el = document.getElementById(id); el.scrollIntoView(); }