ScrollSpy smootscrool, and activeLinkChange()


Topic: ScrollSpy smootscrool, and activeLinkChange()

Karman40 pro asked a week 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 a week 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 commented a week 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


Karman40 pro answered a week 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>

Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 10.0.0
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No