Topic: ScrollSpy smootscrool, and activeLinkChange()

Karman40 priority asked 3 years ago


My nav link html:

  <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>

My nav .ts file: getActiveLink(event: any): void { console.log('event', event); } This is log nothing, but navigate to section. I tried to add href="#any", but also dosen't work.

Please help me, if i want to use smoot scrool how can i do it?


Arkadiusz Idzikowski staff commented 3 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 priority commented 3 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 priority commented 3 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 3 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


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 10.0.0
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: Yes
  • Provided link: No