I want to be able to scroll to a target when a button is pressed. I was thinking something like this.
<button (click)="scroll(#target)">Button</button>
And in my component.ts a method like.
scroll(element) {
window.scrollTo(element.yPosition)
}
I know that the code above is not valid but just to show what I was thinking. I've just started to learn Angular 4 with no previous experience of Angular. I've been searching around for something like this but all the examples are in AngularJs which differs alot to Angular 4
You could do it like this:
<button (click)="scroll(target)"></button>
<div #target>Your target</div>
and then in your component:
scroll(el: HTMLElement) {
el.scrollIntoView();
}
Edit: I see comments stating that this no longer works due to the element being undefined. I created a StackBlitz example in Angular 7 and it still works. Can someone please provide an example where it does not work?
In Angular 7 works perfect
HTML
<button (click)="scroll(target)">Click to scroll</button>
<div #target>Your target</div>
In component
scroll(el: HTMLElement) {
el.scrollIntoView({behavior: 'smooth'});
}
Here is how I did it using Angular 4.
Template
<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>
add this function to the Component.
scroll(id) {
console.log(`scrolling to ${id}`);
let el = document.getElementById(id);
el.scrollIntoView();
}