How to call scrollIntoView on an element in angular 2+

by

First add a template reference variable in the element (the #myElem):

<p #myElem>Scroll to here!</p>

Then create a property in the component with attribute ViewChild, and call .nativeElement.scrollIntoView on it:

export class MyComponent {
  @ViewChild("myElem") MyProp: ElementRef;

  ngOnInit() {
    this.MyProp.nativeElement.scrollIntoView({ behavior: "smooth", block: "start" });
  }
}

More Related Contents:

  1. Why am I seeing a dropdown like thingy and need to “open” my Angular component in chrome
  2. How to group data in Angular 2?
  3. Ionic 2 Form goes up when keyboard shows
  4. RxJS: takeUntil() Angular component’s ngOnDestroy()
  5. Angular EXCEPTION: No provider for Http
  6. How can I conditionally disable the routerLink attribute?
  7. Cannot read property ‘push’ of undefined(…) in angular2
  8. How to set value to form control in Reactive Forms in Angular
  9. Angular Reactive Forms with nested Form Arrays
  10. Reactive forms – disabled attribute
  11. Set default option in mat-select
  12. How to implement sleep function in TypeScript?
  13. Testing error case with observables in services
  14. Angular 2 router resolve with Observable
  15. Build Angular2 HTML and TypeScript to a single file
  16. Is it possible to get native element for formControl?
  17. angular keyvalue pipe sort properties / iterate in order
  18. Multiple named router-outlet angular 2
  19. Angular – Make multiple HTTP calls sequentially
  20. @types/googlemaps/index.d.ts’ is not a module
  21. angular 2 http withCredentials
  22. No provider for Router?
  23. Angular 4+ using Google Analytics
  24. Open/Close sidenav from another component
  25. Angular – How to fix ‘property does not exist on type’ error?
  26. Limit input field to two decimal places – Angular 5
  27. How to create and download text/Json File with dynamic content using angular 2+
  28. Angular4 Load external html page in a div
  29. angular2: http post not executing
  30. How to use angular2 built-in date pipe in services and directives script files [duplicate]

Leave a Comment