ScrollSpy smootscrool, and activeLinkChange()

Arkadiusz Idzikowski staff commented 4 years ago

Could you provide more information on the solution you would like to get? The scroll spy component only have an activeLinkChange output.

You can find information about the Smooth Scroll usage in our documentation: https://mdbootstrap.com/docs/angular/advanced/scroll/

Karman40 pro premium priority commented 4 years ago

Sorry, my full code is here: (nav.html)

<ul mdbScrollSpy="navScroll" (activeLinkChange)="getActiveLink($event)" class="navbar-nav ml-auto text-uppercase font-weight-bold font-small">

  <li class="nav-item" (click)="nav.toggle()">
    <a class="nav-link waves-light" mdbScrollSpyLink="profile" mdbWavesEffect>Szolgáltatások</a>
  </li>
  <li class="nav-item" (click)="nav.toggle()">
    <a class="nav-link waves-light" mdbScrollSpyLink="benefit" mdbWavesEffect>Előnyök</a>
  </li>
  <li class="nav-item" (click)="nav.toggle()">
    <a class="nav-link waves-light" mdbScrollSpyLink="reference" mdbWavesEffect>Referenciák</a>
  </li>
  <li class="nav-item" (click)="nav.toggle()">
    <a class="nav-link waves-light" mdbScrollSpyLink="about" mdbWavesEffect>Cégünkről</a>
  </li>
  <li class="nav-item" (click)="nav.toggle()">
    <a class="nav-link waves-light" mdbScrollSpyLink="contact" mdbWavesEffect>Elérhetőségek</a>
  </li>

</ul>

nav.ts:

getActiveLink(event: any): void { console.log('event', event); }

guio

  <app-navbar></app-navbar>

  <app-home-section-slider></app-home-section-slider>
  <app-home-section-profile mdbScrollSpyElement="navScroll" id="profile"></app-home-section-profile>
  <app-brand-slider></app-brand-slider>
  <app-home-section-advantages mdbScrollSpyElement="navScroll" id="benefit"></app-home-section-advantages>
  <app-home-section-reference mdbScrollSpyElement="navScroll" id="reference"></app-home-section-reference>
  <app-home-section-moseus mdbScrollSpyElement="navScroll" id="about"></app-home-section-moseus>
  <app-home-section-contact mdbScrollSpyElement="navScroll" id="contact"></app-home-section-contact>

  <app-footer></app-footer>

Karman40 pro premium priority commented 4 years ago

I want to use Page Scroll, but i get this error:

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(HomeModule)[PageScrollService -> PageScrollService -> PageScrollService -> PageScrollService]: NullInjectorError: No provider for PageScrollService! NullInjectorError: R3InjectorError(HomeModule)[PageScrollService -> PageScrollService -> PageScrollService -> PageScrollService]: NullInjectorError: No provider for PageScrollService!

Ok i import this service, but doc say nothing

Arkadiusz Idzikowski staff commented 4 years ago

Is there a problem only with the activeLinkChange event or the scrollspy doesn't work at all? Please note that the mdbScrollSpyElement directive should be used to spy on the internal scroll of the specific element. If you want to spy on the main page scroll, you should use mdbScrollSpyWindow like in this example:

https://mdbootstrap.com/docs/angular/navigation/scrollspy/#dotted-scrollspy