Simple links on side nav should stay active if repeatedly cl

This appears to be a bug in the current code.  No matter which element on the accordion I apply the routerLink & routerLinkActive options, they are not applied to the inner div:

This is the Angular code:

<mdb-accordion-item class='no-collase' routerLink='/' routerLinkActive='active'>

<mdb-accordion-item-headmdbWavesEffect>

<fa-icon[icon]='faHome'[fixedWidth]='true'></fa-icon>Home

</mdb-accordion-item-head>

<mdb-accordion-item-body></mdb-accordion-item-body>

</mdb-accordion-item>

This is the generated code.. notice the <div class='card active...'> This doesn't get updated by the routerLink & routerLinkActive properties, no matter which accordion element I use:

<mdb-accordion aria-multiselectable="false" ng-reflect-multiple="false">
<div class="accordion md-accordion"
<mdb-accordion-item class="no-collase">
<div class="card active" ng-reflect-klass="card " ng-reflect-ng-class="[object Object]">
<mdb-accordion-item-head mdbwaveseffect="" routerlink="" routerlinkactive="active" tabindex="0"
ng-reflect-router-link="" ng-reflect-router-link-active="active" class="active waves-effect">
<div class="card-header" ng-reflect-klass="card-header " ng-reflect-ng-class="[object Object]">
<a role="button">
<h5 class="mb-0">
<fa-icon class="ng-fa-icon" ng-reflect-icon-prop="[object Object]"
ng-reflect-fixed-width="true">
<svg aria-hidden="true" data-prefix="far" data-icon="home" class="svg-inline--fa fa-home fa-w-18 fa-fw"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M557.1 240.7L512 203.8V104c0-4.4-3.6-8-8-8h-32c-4.4 0-8 3.6-8 8v60.5L313.4 41.1c-14.7-12.1-36-12.1-50.7 0L18.9 240.7c-3.4 2.8-3.9 7.8-1.1 11.3l20.3 24.8c2.8 3.4 7.8 3.9 11.3 1.1l14.7-12V464c0 8.8 7.2 16 16 16h168c4.4 0 8-3.6 8-8V344h64v128c0 4.4 3.6 8 8 8h168c8.8 0 16-7.2 16-16V265.8l14.7 12c3.4 2.8 8.5 2.3 11.3-1.1l20.3-24.8c2.6-3.4 2.1-8.4-1.3-11.2zM464 432h-96V304c0-4.4-3.6-8-8-8H216c-4.4 0-8 3.6-8 8v128h-96V226.5l170.9-140c2.9-2.4 7.2-2.4 10.1 0l170.9 140V432z">
</path>
</svg>
</fa-icon>
Home
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<i class="fa fa-angle-down rotate-icon ng-star-inserted">
</i>
</h5>
</a>
</div>
</mdb-accordion-item-head>
<mdb-accordion-item-body class="ng-tns-c0-0 ng-star-inserted">
<div class="sb-item-body ng-trigger ng-trigger-expandBody" style="visibility: visible;">
<div class="card-body ">
</div>
</div>
</mdb-accordion-item-body>
</div>
</mdb-accordion-item>
<mdb-accordion-item class="no-collase">
<div class="card is-collapsed" ng-reflect-klass="card " ng-reflect-ng-class="[object Object]">
<mdb-accordion-item-head mdbwaveseffect="">
<div class="card-header" ng-reflect-klass="card-header " ng-reflect-ng-class="[object Object]">
<a role="button">
<h5 class="mb-0">
<fa-icon class="ng-fa-icon" ng-reflect-icon-prop="[object Object]"
ng-reflect-fixed-width="true">
<svg aria-hidden="true" data-prefix="far" data-icon="sign-out" class="svg-inline--fa fa-sign-out fa-w-16 fa-fw"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M96 64h84c6.6 0 12 5.4 12 12v24c0 6.6-5.4 12-12 12H96c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h84c6.6 0 12 5.4 12 12v24c0 6.6-5.4 12-12 12H96c-53 0-96-43-96-96V160c0-53 43-96 96-96zm231.1 19.5l-19.6 19.6c-4.8 4.8-4.7 12.5.2 17.1L420.8 230H172c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h248.8L307.7 391.7c-4.8 4.7-4.9 12.4-.2 17.1l19.6 19.6c4.7 4.7 12.3 4.7 17 0l164.4-164c4.7-4.7 4.7-12.3 0-17l-164.4-164c-4.7-4.6-12.3-4.6-17 .1z">
</path>
</svg>
</fa-icon>
Logout
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<i class="fa fa-angle-down rotate-icon ng-star-inserted">
</i>
</h5>
</a>
</div>
</mdb-accordion-item-head>
<mdb-accordion-item-body class="ng-tns-c0-1 ng-star-inserted">
<div class="sb-item-body ng-trigger ng-trigger-expandBody" style="height: 0px; visibility: hidden;">
<div class="card-body ">
</div>
</div>
</mdb-accordion-item-body>
</div>
</mdb-accordion-item>
</div>
</mdb-accordion>

So basically the ask in this ticket is if the `mdb-accordion-item-head` component has an active class, to apply it to the nested card child element. Or to not mark the card child element as 'is-collapsed' if the parent mdb-accordion-item head component is marked active.  Either approach will solve the issue.

You need to add routerLinkActive to the accordion-item-head instead of accordion-item (if accordion-item-body is empty) or to the 'a' tag (if you have some links inside accordion body).

Please make sure to add css styles as mentioned in the documentation. Those styles will be applied to the h5 element inside accordion-item-head.

If I do the above it still has the same effect.  There are really 2 issues here on the MDB's side:
1) If you click the simple link twice, it'll be activated the first time, but on the 2nd click it'll remove the active class from the inner div.  See this line of code: 
https://git.mdbootstrap.com/mdb/angular/ng-pro/blob/master/pro/accordion/components/sb-item.head.html#L2

It's going to call the toggleClick method on every click....  

2) The routerLink being active is not being applied to the component on a hard refresh of the page.

Could you please send a demo to a.idzikowski@mdbootstrap.com? I tried to recreate these problems on my end, but without success. 

We can block the toggleClick method if accordion body is empty, but it should not affect how routerLinkActive works in this case. As you can see in the css styles we provided in the documentation, background color is applied to the h5 element (child of the accordion head) and not to the parent element with class 'card'.