Scroll to element on click in Angular 4

angular, html, javascript, typescript

Solution

You could do it like this:

<button (click)="scroll(target)">Scroll To Div</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?

Problem

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 a lot to Angular 4

Original source

Related problems