Topic: Sidenav Error - TypeError: child.querySelector is not a function

p4k1tz free asked 1 year ago


Expected behavior Iterating to creating sidenav shouldnt produce an error when clicking on an item.

Actual behavior Clicking on the sidenav items produces an error if they are created with ngFor.

Resources (screenshots, code snippets etc.)

<mdb-sidenav-layout>
<mdb-sidenav #sidenav="mdbSidenav">
    <ul class="sidenav-menu">
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a>
        </mdb-sidenav-item>
        <mdb-sidenav-item *ngFor="let category of categories">
            <a class="sidenav-link">
                <i class="fas fa-grin fa-fw me-3"></i>
                <span>{{category.name}}</span>
            </a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item" *ngFor="let command of category.commands">
                    <a class="sidenav-link" (click)="onClickCommand(command.route)">{{command.name}}</a>
                </li>
            </ul>
        </mdb-sidenav-item>
    </ul>
</mdb-sidenav>
<mdb-sidenav-content #sidenavContent>
    <!-- Toggler -->
    <button #sidenavToggle class="btn btn-primary" (click)="sidenav.toggle()">
        <i class="fas fa-bars"></i>
    </button>
    <!-- Toggler -->
</mdb-sidenav-content>

core.js:6479 ERROR TypeError: child.querySelector is not a function
at mdb-angular-ui-kit-sidenav.js:908
at NodeList.forEach (<anonymous>)
at MdbSidenavItemComponent.setActiveElement (mdb-angular-ui-kit-sidenav.js:903)
at SafeSubscriber._next (mdb-angular-ui-kit-sidenav.js:858)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)
at Subscriber._next (Subscriber.js:72)
at Subscriber.next (Subscriber.js:49)
at TakeUntilSubscriber._next (Subscriber.js:72)
at TakeUntilSubscriber.next (Subscriber.js:49)

If I do not use ngFor I get no error, but as soon as I try to iterate over a list of objects to generate my sidenav, this is what I get.


Arkadiusz Idzikowski staff commented 1 year ago

@p4k1tz Can you provide an example TS code with an object from which you try to create the list so we can reproduce the problem on the exact same example?



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 1.3.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No