Serious issues with Angular sidenav simple link

Topic: Serious issues with Angular sidenav simple link

indijosh free asked 6 years ago

As per the documentation, I have the following code for a non-collapsible (simple) sidenav link

<mdb-item class="no-collase">
 <mdb-item-head mdbRippleRadius ><i class="fa fa-tachometer"></i> Dashboard</mdb-item-head>
 <mdb-item-body></mdb-item-body>
 </mdb-item>

Which compiles to...

<mdb-item class="no-collase">
<div class="card is-collapsed" ng-reflect-klass="card" ng-reflect-ng-class="[object Object]">
<mdb-item class="no-collase">
<div class="card is-collapsed" ng-reflect-klass="card" ng-reflect-ng-class="[object Object]">          
<mdb-item-head mdbrippleradius="">              
<div class="card-header">                  
<a role="button">                      
<h5 class="mb-0">                          
<i class="fa fa-calendar-o"></i> Dashboard                          
<i class="fa fa-angle-down rotate-icon"></i>    
</h5>                  
</a>              
</div>    
</mdb-item-head>          
<mdb-item-body>
<div class="sb-item-body" style="height: 0px;">    
<div class="card-body">        
</div>
</div>
</mdb-item-body>        
</div>
</mdb-item>

So my questions, 1. Why are the Angular Sidenav items wrapped in an H5? 2. Do you have an example application of where you are using the Angular version of MDB? 3. Why is there so much more going on than the JQuery version of the Sidenav? It seems a bit overkill to use cards and have an empty body for each simple sidenav link. 4. (Most importantly) How do we get an href on the anchor without injecting it with .js? In the collapsible example, the anchors are not generated allowing you to add the href.

Add comment

Adrian Sawicki free answered 6 years ago

1 0 Best answer

Okay, I see the issue here. We will fix it so there won't be that a tag there. However, you should use angular routing. If you create your routing you can just make navigation onClick to work around it and have a possibility to change it dynamically. You can read about it for example here: https://toddmotto.com/angular-component-router

AgentEnder free commented 4 years ago

Angular routing should not be used when navigating to an external url, or a user-provided link in my case (as I am allowing moderators to customize their sidebars). I know this is an old question, but there should be a way to bind to the href and title of that anchor tag if it is going to be inserted.

Add comment

AgentEnder free answered 4 years ago

1 0 Best answer

Please insert min. 20 characters.

This is an old question, but the issue with not being able to provide an href for the link still exists (somehow? I thought this was basic html requirements).

In the sidenav if you replace the sample code for the simple link with this:

                        <li>
                            <a [href]="l.href" [title]="l.title">
                            <mdb-icon
                                far
                                icon="hand-pointer"
                            ></mdb-icon>
                                {{ l.title }}
                            </a>
                        </li>

everything seems to work pretty well. The styling is a little bit different, but its really close. Hopefully this helps someone else out, it took way too long for me to find.

Konrad Stępień staff commented 4 years ago

Hi @AgentEnder,

Thank you for your answer. I will look at this problem and take your suggestion for a fix the issue.

Best, Konrad.

Add comment

lpoore pro answered 6 years ago

1 0 Best answer

Please insert min. 20 characters.

We were experiencing the same issue. One of the developers told me to add - angular routerLink="" - to the mdb-item-head. It did the trick for us. As long as the route is defined in routes.ts this should work. See code below:

<mdb-itemclass="no-collase">

<mdb-item-head angular routerLink="Policy/Security"mdbRippleRadius>

<iclass="fa fa-drivers-license-o fa-2x">

<spanstyle="font-size:1.0rem">Policy Summary

</mdb-item-head>

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

</mdb-item>

Add comment

Adrian Sawicki free answered 6 years ago

1 0 Best answer

Please insert min. 20 characters.

Hello, 1. We treated it as a section title. It might be true it isn't needed. We will look closer into it. 2. We don't have. At least yet. 3. Angular is quite new product and we are still working on making it way better, so it might be crude in some places. 4. I'm not sure what is your problem. If you want to have a link in your ul you just add it to mdb-item-body, if you want to have a single link as in sidenav example you create mdb-item with class="no-collapse". Is this what you had a problem with or I've just misunderstood something?

indijosh free commented 6 years ago

Adrian, Thanks for the reply! I really do appreciate how quick and succinct you all are with replying. As for #4 above, I'm looking to create a single link but I don't know where to put the href. Here's the code from the angular sidenav example: <pre><mdb-item class="no-collase"> <mdb-item-head mdbRippleRadius> Simple link</mdb-item-head> <mdb-item-body></mdb-item-body> </mdb-item></pre> And this generates the sidenav item with the anchor, but I don't know how to change the href of the anchor since it's generated. If I manually add an anchor to the link like the code example below, an anchor is still generated and causes my anchor to lose the (click) property and be nested inside of the generated anchor: <pre><mdb-item class="no-collase"> <mdb-item-head mdbRippleRadius><a (click)="changeRoute('docs')"> Document Center</a></mdb-item-head> <mdb-item-body></mdb-item-body> </mdb-item></pre>

Please insert min. 15 characters.

Jan Louw pro commented 6 years ago

Hi, any resolutions to this? Any code examples for simple links from sidenav? Regards

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

indijosh

10Support score
1Questions 1Answers 0Snippets