How to scroll to a component from another component?

[Nikki1993]

I got the app.component.html having smth like this

<md-sidenav-container (pan)="swipeSidenav($event)" mode="over">
  <md-sidenav #sidenav>
    <app-sidenav-content></app-sidenav-content>
  </md-sidenav>
  <nav class="mat-elevation-z4">
    <app-top-nav></app-top-nav>
  </nav>
  <header>
    <app-intro></app-intro>
  </header>
  <main>
    <app-primary-offer></app-primary-offer>
    <app-contact-form></app-contact-form>
    <app-offer></app-offer>
    <app-projects id="awesomePart"></app-projects>
  </main>
</md-sidenav-container>

And I want to scroll to projects so I assign the ID to it, but the button itself is inside app-top-nav component

<button pageScroll href="#awesomePart" fxHide fxShow.gt-md md-button>Offers</button>

So when pressing it nothing happens. I generated the project with Angular-Cli and added it dependency in the app.modules.ts

import { Ng2PageScrollModule } from 'ng2-page-scroll';
...
imports: [
   ...
    Ng2PageScrollModule.forRoot()
  ],

So, how do I make it work with communicating between components? I tried using a shared service

constructor(private pageScrollService: PageScrollService, @Inject(DOCUMENT) private document: any) { }

public goToPart(): void {
    const pageScrollInstance: PageScrollInstance = PageScrollInstance.simpleInstance(this.document, 'awesomePart');
    this.pageScrollService.start(pageScrollInstance);
  }

and then using it within the component where button click occurs, but it throws me

Scrolling not possible, as we can't find the specified target

Even though I know the id is correct.

[Nikki1993]

To add to the message, document.getElementByid('id') finds it perfectly fine.

[Nolanus]

Hi,

the second parameter of the simpleInstance method (the scrollTarget) is similar to a css selector. Add the # in front of the element id:

const pageScrollInstance: PageScrollInstance = PageScrollInstance.simpleInstance(this.document, '#awesomePart');

In future versions it might be possible to select scrollTargets based on other thinks than the id.

[Nikki1993]

Hello,

There is no more error in the console about missing target but it doesn't scroll at all when I press the button. Am I not getting smth?

[Nolanus]

I assume you have to use a custom scrollView, as the material2 sidenav directive introduces a non-trivial DOM hierarchy: https://github.com/Nolanus/ng2-page-scroll/wiki/Using-the-right-scrolling-view

[Nikki1993]

Hello again,

Apologies for missing. I tried to determine, which element had $0.scrollTop equal to a non-zero value but all of them returned 0 o_O so I am not really sure to which element I should even bind it.

My app.component.html looks like this

<md-sidenav-container (pan)="swipeSidenav($event)" mode="over">
  <md-sidenav #sidenav>
    <app-sidenav-content></app-sidenav-content>
  </md-sidenav>
  <nav class="mat-elevation-z4">
    <app-top-nav></app-top-nav>
  </nav>
  <header>
    <app-intro id="home"></app-intro>
  </header>
  <main>
    <app-primary-offer id="core"></app-primary-offer>
    <app-contact-form id="sign" [captcha]="captchaValue" (requestCaptcha)="captchaRef.execute()"></app-contact-form>
    <app-offer id="offers"></app-offer>
    <app-projects id="projects"></app-projects>
  </main>
</md-sidenav-container>
<re-captcha #captchaRef="reCaptcha" size="invisible" siteKey="secret" (resolved)="captchaValue = $event"></re-captcha>

[Nolanus]

Check that plunkr using md-sidenav from material2 library: https://plnkr.co/edit/mmBS1AZv7Jd7eCTrFCOZ?p=preview

The scrollable view is the div.mat-sidenav-content the sidenav module introduces while creating itself. Due to that is's not possible to set an id on the object and you have to get it manually in the component to pass it to the PageScrollInstance.

[Nikki1993]

Freaking brilliant. Thanks a lot. I've been trying to wrap my head around it for hours.