Scroll to element on click in Angular 4

by

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?

More Related Contents:

  1. (change) vs (ngModelChange) in angular
  2. Highlight the search text – angular 2
  3. What does Angular 2 hashtags in template mean?
  4. Angular 7 go offline?
  5. How to add number with variable name? [duplicate]
  6. typescript anonymous object with variable based label value
  7. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  8. How do I download a file with Angular2 or greater
  9. Angular 2: How to detect changes in an array? (@input property)
  10. Typescript Type ‘string’ is not assignable to type
  11. Angular 2 Karma Test ‘component-name’ is not a known element
  12. How to do the chain sequence in rxjs
  13. Angular 6: How to set response type as text while making http call
  14. using external JS libraries in my angular 2 project
  15. Is it a good practice using Observable with async/await?
  16. How to handle window scroll event in Angular 4?
  17. Prevent IE11 caching GET call in Angular 2
  18. Nested arrays in Angular 2 reactive forms?
  19. Angular: In which lifecycle hook is input data available to the Component
  20. Angular 2 Component @Input not working
  21. angular 4+ assign @Input for ngComponentOutlet dynamically created component
  22. Angular 4 Filter Search Custom Pipe
  23. Angular 2 typescript invoke javascript function
  24. Whats the difference between using a class and interface?
  25. How to loop over object properties with ngFor in Angular
  26. Load JSON content from a local file with http.get() in Angular 2
  27. Converting an image to base64 in angular 2
  28. Google Sign-In for Websites and Angular 2 using Typescript
  29. Filter Array in Array by date between 2 dates
  30. binding data to angular checkbox

Leave a Comment