Hello ! I'm trying to use the scrollspy for my entire page. I've a navbar which autoscroll the user if he clicks on a section. I want that navbar to scrollspy the page to display the section where the user is.

Expected behavior

Links in navbar should become active while scrolling.

Actual behavior

The active class is never set. When I try to set manually the active class to a link, it is removed on page load.

Resources (screenshots, code snippets etc.)

navbar.component.html

<mdb-navbar #navbarid SideClass="navbar navbar-expand-md navbar-dark sticky-top bg-white z-depth-0">

    <mdb-navbar-brand><a class="navbar-brand" (click)="scrollToElement('#section1')">Chalet Mosan
<span class="localite">Hermeton-Sur-Meuse</span></a></mdb-navbar-brand>

    <links>
        <ul class="navbar-nav" mdbScrollSpy="scrollspy1">
            <li class="nav-item">
                <a mdbScrollSpyLink="section1" (click)="scrollToElement('#section1')" class="nav-link text-nowrap active">Le chalet<span class="sr-only">(current)</span></a> 
            </li>
 //On page load, the 'active' is removed. When I try to inspect the element, there is no 'active' class
            <li class="nav-item">
                <a mdbScrollSpyLink="section2" (click)="scrollToElement('#section2')" class="nav-link text-nowrap">Le petit dejeuné</a>
            </li>
            <li class="nav-item">
                <a mdbScrollSpyLink="section3" (click)="scrollToElement('#section3')" class="nav-link text-nowrap">Les petits plus</a>
            </li>
            <li class="nav-item">
                <a mdbScrollSpyLink="section4" (click)="scrollToElement('#section4')" class="nav-link text-nowrap">Nos formules</a>
            </li>
            <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
                <a mdbScrollSpyLink="section5" (click)="scrollToElement('#section5')" class="nav-link text-nowrap">Contact/Réservations</a>
            </li>
        </ul>
    </links>

</mdb-navbar>

section1 to section5.html

<section mdbScrollSpyWindow="scrollspy1" id="{{ name }}"> //id is filled with section1 to section5
    <h2>{{ title }}</h2>
    <div class="row">
        <div class="col-8">
            foo
        </div>
        <div class="col-4">
            foo
        </div>
    </div>
</section>

I don't get why this isnt working... I followed the example shown in documentation but still can't make it work.

Thanks a lot for time spent helping me resolving this!