Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: ScrollSpy smootscrool, and activeLinkChange()

Karman40 priority asked 4 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 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 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 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

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
Tags
scrollspy smoot-scrool activelinkchange
About author
Karman40
155Support score
16Questions 8Answers 0Snippets