Angular: scrollIntoView on Component

Question

I've this subcomponent reference using @ViewChild anotation:

@ViewChild(UserSubComponent)
private userManagementComponent: UserSubComponent;

I'd like to use this reference to perform scrollIntoView.

Is it possible?

you may use the method use in this answer : https://stackoverflow.com/questions/46658522/how-to-smooth-scroll-to-page-anchor-in-angular-4-without-plugins-properly/51400379#51400379 — Joel Joseph, Jun 21 '19 at 11:40
Or use [fragments](https://angular.io/guide/router#query-parameters-and-fragments) the Angular way of doing so — , Jun 21 '19 at 11:44

score 3 · Accepted Answer · answered Jun 21 '19 at 15:33

Change your selector so that it returns an ElementRef.

@ViewChild(UserSubComponent, {read: ElementRef})
private userManagementComponent: ElementRef;

then use the native element to scroll into view when you want:

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

1 Answers1