Angular 2 navigate between a set of components on scroll

Question

I want to change the components based on scroll event in the following way :

• If the user reaches the end (scroll position) of a component, the next component should get loaded
• Similarly if the user reaches the top (scroll position) of a component, the previous component should get loaded.
• All these components should have independent router links (path)

So if there are 2 pages (components) ComponentA and ComponentB with paths "/a" and "/b" respectively They should get loaded inside a component (parent/wrapper)

I am trying to detect those changes in the parent component

import { Component, HostListener, ElementRef, Output, EventEmitter, OnInit } from '@angular/core';
import { Router } from "@angular/router"


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {


  @Output() mouseWheelUp = new EventEmitter();
  @Output() mouseWheelDown = new EventEmitter();

  @HostListener('mousewheel', ['$event']) onMouseWheelChrome(event: any) {
    this.mouseWheelFunc(event);
  }
  @HostListener('DOMMouseScroll', ['$event']) onMouseWheelFirefox(event: any) {
    this.mouseWheelFunc(event);
  }
  @HostListener('onmousewheel', ['$event']) onMouseWheelIE(event: any) {
    this.mouseWheelFunc(event);
  }

  ngOnInit() {
  }

  mouseWheelFunc(event: any) {
    let currentScrollPos = window.pageYOffset;
    let elemStartsAt = this.ref.nativeElement.offsetTop;
    var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
    if(delta > 0) {
        console.log("Up "+currentScrollPos+" "+elemStartsAt);
    } else if(delta < 0) {
        console.log("Down"+currentScrollPos+" "+elemStartsAt);

    }
  }

  constructor(private router : Router) {}

}

Answer 1

I got the solution

Parent component HTML

<router-outlet></router-outlet>

Parent component TS

import { Component, HostListener, ElementRef, Output, EventEmitter, OnInit } from '@angular/core';
import { Router } from "@angular/router"


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {

  public components = ["/1","/2"]; // Path of ordered components
  public current : number;
  public lastPos : any;

  @Output() mouseWheelUp = new EventEmitter();
  @Output() mouseWheelDown = new EventEmitter();

  @HostListener('mousewheel', ['$event']) onMouseWheelChrome(event: any) {
    this.mouseWheelFunc(event);
  }
  @HostListener('DOMMouseScroll', ['$event']) onMouseWheelFirefox(event: any) {
    this.mouseWheelFunc(event);
  }
  @HostListener('onmousewheel', ['$event']) onMouseWheelIE(event: any) {
    this.mouseWheelFunc(event);
  }

  ngOnInit() {
    /** Route to 1 by default */
    this.router.navigate(["/1"]);
    this.current = 0;
    this.lastPos = -1;
  }

  mouseWheelFunc(event: any) {
    // console.log(window.event)
    let currentScrollPos = window.pageYOffset;
    // let elemStartsAt = this.ref.nativeElement.querySelector('p').offsetTop;
    var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
    if(delta > 0) {
        // console.log("Up "+currentScrollPos+" "+elemStartsAt);
        if (currentScrollPos == 0) {
          this.navigateToPrevious();
        }
    } else if(delta < 0) {
        if (currentScrollPos == this.lastPos) {
          this.navigateToNext();
        } else {
          this.lastPos = currentScrollPos;
        }
        // console.log("Down"+currentScrollPos+" "+elemStartsAt);

    }
  }

  constructor(private router : Router, private ref : ElementRef) {}

  private navigateToNext() {
    if (this.current + 1 < this.components.length) {
      // Next component is available
      let path = this.components[++this.current];
      this.router.navigate([path]);
    }
  }

  private navigateToPrevious() {
    if (this.current > 0) {
      let path = this.components[--this.current];
      this.router.navigate([path]);
    }
  }

}