Angular scroll to another component

Question

In Angular I want to scroll to component using button that placed in another component.Here is my code for the first component

        <div id='banner' class="col-5 offset-1 d-flex justify-content-center align-items-center">
                <button class="btn mt-5">
                    <span class="mx-3">Go</span>
                </button>
        </div>

My second component

<div  id="services" class="container-fluid">
</div

My app.component.html

  <app-banner></app-banner>
  <app-services></app-services>

Answer 1

Add click event to call function inside BannerComponent.

<div id='banner' class="col-5 offset-1 d-flex justify-content-center align-items-center">
  <button (click)="onScrollToAnchor()" class="btn mt-5">
    <span class="mx-3">Go</span>
  </button>
</div>

Use ViewPortScroller to scroll to anchor (id="services") in ServicesComponent.

import { ViewportScroller } from '@angular/common';

class BannerComponent {

constructor(private scroller: ViewportScroller)

onScrollToAnchor() {
 this.scroller.scrollToAnchor('services')
}

}