How can I make sure that when there's a click on a router link within the <app-navbar> ponent, the browser will scroll down to the router outlet ?

This is what my appponent.html looks like at the moment:

<div class="container-fluid h-100">
  <app-navbar></app-navbar>
  <div class="row h-100">
    <app-header class="h-100 overflow-auto col-md-12  col-lg-5"></app-header>
    <div id="main" class="h-100 overflow-auto col-md-12 col-lg-7">
      <router-outlet #o="outlet"></router-outlet>
    </div>
  </div>
</div>

the <app-navbar>contains router-links and the <app-header>takes up 100% of the height on mobile. So I want to make sure that whenever a user clicks on a link in the navbar, the page scrolls down to the newly loaded ponent under the <app-header>

I had a look at this library : but couldn't manage to make it scroll (I suppose because I was trying to scroll to an element of a different ponent).

Just when I was about to edit this message I found this library : but same thing, I am not sure how to make it work.

How can I make sure that when there's a click on a router link within the <app-navbar> ponent, the browser will scroll down to the router outlet ?

This is what my app.ponent.html looks like at the moment:

<div class="container-fluid h-100">
  <app-navbar></app-navbar>
  <div class="row h-100">
    <app-header class="h-100 overflow-auto col-md-12  col-lg-5"></app-header>
    <div id="main" class="h-100 overflow-auto col-md-12 col-lg-7">
      <router-outlet #o="outlet"></router-outlet>
    </div>
  </div>
</div>

the <app-navbar>contains router-links and the <app-header>takes up 100% of the height on mobile. So I want to make sure that whenever a user clicks on a link in the navbar, the page scrolls down to the newly loaded ponent under the <app-header>

I had a look at this library : https://www.npmjs./package/ngx-page-scroll but couldn't manage to make it scroll (I suppose because I was trying to scroll to an element of a different ponent).

Just when I was about to edit this message I found this library : https://www.npmjs./package/angular-scroll but same thing, I am not sure how to make it work.

• javascript
• angular

Share Improve this question Follow edited Oct 17, 2019 at 7:53 asked Oct 16, 2019 at 20:55 user10562825user10562825 3

• Start with scrollIntoView – Chris W. Commented Oct 16, 2019 at 21:03
• @ChrisW. not a great suggestion since the browser support isnt very good.. developer.mozilla/en-US/docs/Web/API/Element/… – Smokey Dawson Commented Oct 16, 2019 at 23:07
• @SmokeyDawson All browsers support it, you just don't get the nifty options like smooth scroll in a couple of them.... – Chris W. Commented Oct 17, 2019 at 14:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

After a bit of research, here is a solution that works :

1. Make sure the <app-module>gets the click event in the <app-navbar>

Exemple of a link in app-navbar.html :

<a class="nav-link" routerLink="bio" routerLinkActive="active" (click)="scrollToMain()" >Bio</a> 

Exemple of app-navbar.ts

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.ponent.html',
  styleUrls: ['./navbar.ponent.css']
})
export class NavbarComponent {
  @Output() scroll: EventEmitter<any> = new EventEmitter();

scrollToMain() {
    this.scroll.emit(true);
  }
}

2. Catching the event in app.ponent.html

<div class="container-fluid h-100">
  <app-navbar  (scroll)="onScroll('#main')"></app-navbar>
  <div class="row h-100">
    <app-header class="h-100 overflow-auto col-md-12  col-lg-5"></app-header>
    <div id="main" [@routeAnimations]="o && o.activatedRouteData && o.activatedRouteData['animation']"
      class="h-100 overflow-auto col-md-12 col-lg-7">
      <router-outlet #o="outlet"></router-outlet>
    </div>
  </div>
</div>

Acting on the event in app.ponent.ts

import { Component, Inject} from '@angular/core';
import { DOCUMENT } from '@angular/mon';
import { PageScrollService } from 'ngx-page-scroll-core';
@Component({
  selector: 'app-root',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.css']
})
export class AppComponent {
  constructor(private pageScrollService: PageScrollService, @Inject(DOCUMENT) private document: any) {
  }

  onScroll(target) {
    this.pageScrollService.scroll({
      document: this.document,
      scrollTarget: target,
    })
  }
}

It could work as well with scrollIntoView but I used the ngx-page-scroll to make things smother : https://www.npmjs./package/ngx-page-scroll.

Hope it helps someone :)