Angular – Scroll to a…

Angular – Scroll to a div in child component

Child Component

<div  #scrollToPoint>
div to scroll
 </div>

Return scroll point to parent

 @ViewChild('scrollToPoint', { static: false }) scrollToPoint: ElementRef;
  constructor() { }
  ngOnInit() {
  }
  getScrollPoint() {
    return this.scrollToPoint;
  }

Parent Component

  @ViewChild(ChildComponent, { static: false }) childComponent: ChildComponent;
 scroll() {
    this.ChildComponent.getScrollPoint().nativeElement.scrollIntoView();
  }

This would work fine. If you have another button in a child and want to listen to that to scroll, you can add an event emitter:

Parent HTML

<app-child-hero (startHereClick)="scroll()"></app-child-hero> >

Child HTML

<button type="button" class="btn btn-danger" (click)="startHere()">Start Here</button>

Child Class

 @Output() startHereClick: EventEmitter<boolean> = new EventEmitter();
 startHere() {
    this.startHereClick.emit(true);
  }

#angular

#scrolltopoint