Associating a sidenav entry with router

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Associating a sidenav entry with router

mdb2 pro asked 6 years ago

Regarding sidenav: https://mdbootstrap.com/angular/advanced/sidenavHow can I associate a sidenav entry with router so that the correct mdb-item will be selected when entering a state ?

Arkadiusz Idzikowski staff answered 6 years ago

Dear mdb2, There is no way to do it now. I added task to our to-do list. Best, Arek

mdb2 pro commented 6 years ago

What do you mean there is no way ? This is how sidebar works. User clicks sidebar item and view changes. Alternatively, user lands through a link and sidebar reflects current state. How come the sidebar is selected correctly in this link ? https://mdbootstrap.com/angular/advanced/modals/

Arkadiusz Idzikowski staff commented 6 years ago

Dear mdb2, There are some problems with the second behaviour you mentioned (the one when user lands through a link and sidenav should reflect the state) and we have to fix them. Best, Arek

mdb2 pro commented 6 years ago

Arek, when will you fix it ?

Damian Gemza staff commented 6 years ago

Dear mdb2, We can't provide you any ETA on this because we have some other tasks in future sprints. But we'll do our best to fix it in nearest future. Best Regards, Damian

mdb2 pro commented 6 years ago

Any news ?

Damian Gemza staff commented 6 years ago

Dear mdb2, Still, we haven't got the fix for that case. We'll let you know when it will be ready. Best Regards, Damian

mdb2 pro commented 6 years ago

Thanks Damian, Do you have an estimate ?

Damian Gemza staff commented 6 years ago

Unfortunately, We can't provide you with any ETA, because we've got other fixes with higher priority. Best Regards, Damian

mdb2 pro commented 6 years ago

Any news ? How can the user know where he is by looking at the sidenav ? How can I set the "active" class on that menu item ?

Arkadiusz Idzikowski staff commented 6 years ago

Dear mdb2, Unfortunately this problem is not fixed yet and we can't provide you with any ETA. Regards, Arek

mdb2 pro commented 6 years ago

Is there a workaround ?

Arkadiusz Idzikowski staff commented 6 years ago

Unfortunately we cannot provide a workaround for now.

mdb2 pro commented 6 years ago

Then I don't understand how the user can tell in what page he is in. He will get lost In the jQuery version there was a solution

mdb2 pro answered 6 years ago

In the release notes of MDB Angular update - version 6.2.6 it is written: "Resolved problem with usage of routerLinkActive in mdb-sidenav. Sidenav should now highlight active item and toggle accordion item depending on the active route." Does it relate to this question and if so, please point me to the documentation as just adding routerLinkActive="active" to the <mdb-accordion-item-head> with the [routerLink] doesn't work

Arkadiusz Idzikowski staff answered 6 years ago

Dear mdb2 Yes, this change is related to your question, this problem should be resolved in version 6.2.6. We need to add some examples to our documentation. Please add routerLinkActive="active" to the 'a' tag in mdb-accordion-item-body. Regards, Arek

skota524 pro commented 5 years ago

Hi,

This is not working for nested menu.

https://mdbootstrap.com/support/angular/how-to-implement-mdb-side-nav-with-multi-level-menu/

Can you please provide a fix/ workaround for this issue.?

Thanks, Shashi

Arkadiusz Idzikowski staff commented 5 years ago

Could you provide more details about the problem?

mdb2 pro answered 6 years ago

Doesn't work. Here is a snippet:
<mdb-accordion[multiple]="false"aria-multiselectable="false">
<mdb-accordion-itemclass="no-collase">
<mdb-accordion-item-head[routerLink]="['/admin/dashboard']"mdbWavesEffect>
<iclass="fa fa-pie-chart"></i> Dashboard
</mdb-accordion-item-head>
<mdb-accordion-item-bodyrouterLinkActive="active"></mdb-accordion-item-body>
</mdb-accordion-item>
</mdb-accordion>

Arkadiusz Idzikowski staff answered 6 years ago

You need to add routerLinkActive to the link and not mdb-accordion-item-body. Here is an example: 
<a routerLink="/test" routerLinkActive="active">Test</a>

mdb2 pro answered 6 years ago

The <mdb-accordion-item-body> is empty, I just use a <mdb-accordion-item-head>with [routerLink] instead of <a> according to the code in the basic usage example here https://mdbootstrap.com/angular/advanced/sidenav/#usage 
      <!-- Simple link -->
                <mdb-accordion-item class="no-collase">
                    <mdb-accordion-item-head mdbWavesEffect><i class="fa fa-hand-pointer-o"></i> Simple link</mdb-accordion-item-head>
                    <mdb-accordion-item-body></mdb-accordion-item-body>
                </mdb-accordion-item>

Can you specify what should be in the head and what in the body, e.g., a complete snippet ?

mdb2 pro commented 6 years ago

<!-- Simple link -->
<mdb-accordion-item class="no-collase">
<mdb-accordion-item-head mdbWavesEffect><i class="fa fa-hand-pointer-o"></i> Simple link</mdb-accordion-item-head>
<mdb-accordion-item-body></mdb-accordion-item-body>
</mdb-accordion-item>

Can you specify what should be in the head and what in the body, e.g., a complete snippet ?

Arkadiusz Idzikowski staff commented 6 years ago

Sorry, I thought you were trying to add routerLinkActive to the nested link. It looks like there are some problems with mdb-accordion-item-head styles, we will take a closer look at it and update our documentation with new examples.

For now please use this styles:

mdb-accordion-item-head.active {
  background-color:  your-color !important;
}

mdb2 pro answered 6 years ago

Obviously I had to change background-color to color but although background-color worked, color does not. Will it be fixed in the next ver for main and nested items ?

Arkadiusz Idzikowski staff answered 6 years ago

We will definitely want to add all necessary fixes in next version. To style color of the text you would need to change css rule to: 
mdb-accordion-item-head.active a h5 {

color: red!important;

}

mdb2 pro answered 6 years ago

OK. I wait. Do you have a date for it ?

Arkadiusz Idzikowski staff answered 6 years ago

It should be ready in new version (12th November probably), but in some cases users would need to add custom styles anyway,  because we can't provide default .active class for links when there are many options for styling sidenav colors. Did the solution I provided in my previous post work for you?

mdb2 pro answered 6 years ago

I don't really know what do so I'll wait for next week

mdb2 pro answered 6 years ago

Using 6.3.0
routerLinkActive="active" near [routerLink]="['/admin/inquiries']" works !
However
1.
I had to change the style of the "active" class although mdb knows already what is the style of the selected menu item, regardless of routerLinkActive
2. when is link is nested, the parent is not opened on refresh
3. when the link has parameters, the link itself is not active. e.g. http://localhost:4200/admin/users;type=bk
Further reading;

Arkadiusz Idzikowski staff answered 6 years ago

Dear mdb2, We didn't add custom class for active link because there are many options to customize the sidenav and the user may want to adapt the appearance of active links to sidenav styles. Could you provide a demo on which I would be able to debug those problems? You can send it to a.idzikowski@mdbootstrap.com Regards, Arek

mdb2 pro answered 6 years ago

In ver 7.5.4 change log it says:

  • Sidenav with routerLink will now open active links after reload while using HashLocationStrategy.

Is it related and where can I find more info regarding HashLocationStrategy ?

Damian Gemza staff commented 6 years ago

Just Google "Hash Location Strategy Angular". This is the Angular Router mechanism which will allow you to use the hash in the route path.

https://codecraft.tv/courses/angular/routing/routing-strategies/
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
itay
Pro User
2474Support score
150Questions 196Answers
0Snippets likes 0Snippets