Sidenav routerLinkActive is behaving weird.


Topic: Sidenav routerLinkActive is behaving weird.

skota pro asked 5 years ago

Expected behavior

Only once item should be selected. When i refresh i see only one item selected. But when i select another, previous item is still selected.

Actual behaviorenter image description here

Resources (screenshots, code snippets etc.)

                    <!-- Collapsible link -->
                    <mdb-accordion-item *ngFor="let link of links" class="no-collase">
                        <mdb-accordion-item-head mdbWavesEffect [routerLink]="link.path" [routerLinkActive]="'active'">
                            <mdb-icon fas [icon]="link.icon"></mdb-icon> {{link.name}}
                        </mdb-accordion-item-head>
                    </mdb-accordion-item>

                </mdb-accordion>

Arkadiusz Idzikowski staff commented 5 years ago

Thank you for reporting this problem, we will take a closer look at that. Just to clarify - every accordion item have different routerLink path?


skota pro commented 5 years ago

Hi,

Its because mdb-ac-item-body is missing.

When I fixed that, 95% active is being applied properly.

If I navigate to a page by clicking nav item, it works fine. But if I navigate to different route through code, having this issue.

For example, in RouteGuard, if the user is not logged in, I am going to the login screen.At this point, 2 links are getting active.

This could be an Angular issue also?

If you have any suggestions, please provide me.


Arkadiusz Idzikowski staff commented 5 years ago

How exactly do you change the route programatically? I tested that with this.router.navigate(['/route_name']) method and active link was updated correctly.

Which 2 links were highlighted in this case? It might be necessary to add [routerLinkActiveOptions]="{exact: true}" to the item that points to home ('/') route.


fartonheart answered 5 years ago

How do i use sidenav in angular?

This link shows very ugly top down navigation where it says

Click on the images below to see live preview

https://mdbootstrap.com/docs/jquery/navigation/sidenav/

all images show same sidenav I am still learning angular but themdb angular tutorials are not enough help to make sidenav.


Bartosz Termena staff commented 5 years ago

Hi!

To use sidenav in angular just go here and copy the code to your project:

https://mdbootstrap.com/docs/angular/navigation/sidenav/#basic-usage

Hope it helps!

Best Regards, Bartosz.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: Mac book pro
  • Browser: Chrome
  • OS: Mac
  • Provided sample code: No
  • Provided link: No