Associating a sidenav entry with router

itay pro answered 5 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 5 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/

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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

Add comment

itay pro answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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;

1. https://www.bennadel.com/blog/3375-forcing-routerlinkactive-to-update-using-an-inputs-hack-in-angular-5-0-2.htm

2. https://stackoverflow.com/questions/39271654/routerlinkactive-for-routerlink-with-parameters-dynamic

3. https://github.com/angular/angular/issues/22588

Add comment

itay pro answered 6 years ago

0 0 Best answer

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

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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?

Add comment

itay pro answered 6 years ago

0 0 Best answer

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

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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;

}

Add comment

itay pro answered 6 years ago

0 0 Best answer

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 ?

Add comment

itay pro answered 6 years ago

0 0 Best answer

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
<pre class="code-toolbar language-markup"><code class=" language-markup"> 
 <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 ?</code></pre>

Please insert min. 20 characters.

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 ?

itay pro commented 6 years ago

<mdb-accordion-item class="no-collase">
<mdb-accordion-item-head mdbWavesEffect> 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;

}

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

You need to add routerLinkActive to the link and not mdb-accordion-item-body. Here is an example:
<pre class="code-toolbar grey lighten-2 p-3 mb-3"><<a class="code-anchor" href="https://angular.io/api/router/RouterLinkWithHref" target="_blank" rel="nofollow noopener">a</a> <a class="code-anchor" href="https://angular.io/api/router/RouterLink" target="_blank" rel="nofollow noopener">routerLink</a>="/test" <a class="code-anchor" href="https://angular.io/api/router/RouterLinkActive" target="_blank" rel="nofollow noopener">routerLinkActive</a>="active">Test</<a class="code-anchor" href="https://angular.io/api/router/RouterLinkWithHref" target="_blank" rel="nofollow noopener">a</a>></pre>

Please insert min. 20 characters.

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>

Add comment

itay pro answered 6 years ago

0 0 Best answer

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"> Dashboard

</mdb-accordion-item-head>

<mdb-accordion-item-bodyrouterLinkActive="active"></mdb-accordion-item-body>

</mdb-accordion-item>

</mdb-accordion>

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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

skota 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?

Add comment

itay pro answered 6 years ago

0 0 Best answer

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

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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

itay 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

itay 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

itay 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

itay 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

itay 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

itay pro commented 6 years ago

Is there a workaround ?

Arkadiusz Idzikowski staff commented 6 years ago

Unfortunately we cannot provide a workaround for now.

itay 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

Add comment