Sidenav Dynamic mdb-item

Topic: Sidenav Dynamic mdb-item

itdev pro asked 6 years ago

I would like to dynamically change the side nav that is "fixed" by updating the mdb-item list depending on a selected from a mdb-select in the sidenav. I tried to use ngIf to load different components but the sidenav is not updating properly based on the mdb-select selected value.

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear itdev,

I've tried to reproduce your case:

Got Double nav with fixed sidenav and fixed navbar, material select with two-way data binding and string interpolation from selected value to sidenav items.

My .ts code looks as follow:
<div>
<pre>optionsSelect: Array<any>;

selectedValue:any= [

{value: '', label: ''}

];

ngOnInit() {

this.selectedValue=this.optionsSelect;

this.optionsSelect= [

{ value: 'Link 1', label: 'Link 1' },

{ value: 'Link 2', label: 'Link 2' },

{ value: 'Link 3', label: 'Link 3' },

];

}</pre>
</div>
<pre></pre>
<div>my material select .html code looks like following:</div>
<div></div>
<div>
<div>
<pre><mdb-select [options]="optionsSelect" [(ngModel)]="selectedValue" placeholder="Choose your option"></mdb-select></pre>
</div>
</div>
<div></div>
<div>And there's a part of sidenav links:</div>
<div>
<div>
<pre><mdb-item>

<mdb-item-head mdbRippleRadius>

<i class="fa fa-chevron-right"></i> Dynamic links</mdb-item-head>

<mdb-item-body>

<ul>

<li>

<a href="#" class="waves-effect" mdbRippleRadius>{{selectedValue}}</a>

</li>

</ul>

</mdb-item-body>

</mdb-item></pre>
</div>
</div>
<div></div>
<div>And for me, everything is working fine. When i select value 'Link 1' from Material Select, this value is placed in my {{selectedValue}} place. And if I pick something else, automatically that value is passed to my sidenav link.</div>
<div></div>
<div>Let me know if my code works for you.</div>
<div>Best Regards,</div>
<div>Damian</div>

Please insert min. 20 characters.

Dear itdev, I've tried to reproduce your case: Got Double nav with fixed sidenav and fixed navbar, material select with two-way data binding and string interpolation from selected value to sidenav items. My .ts code looks as follow:

optionsSelect: Array<any>;

selectedValue:any= [

{value: '', label: ''}

];

ngOnInit() {

this.selectedValue=this.optionsSelect;

this.optionsSelect= [

{ value: 'Link 1', label: 'Link 1' },

{ value: 'Link 2', label: 'Link 2' },

{ value: 'Link 3', label: 'Link 3' },

];

}

my material select .html code looks like following:

<mdb-select [options]="optionsSelect" [(ngModel)]="selectedValue" placeholder="Choose your option"></mdb-select>

And there's a part of sidenav links:

<mdb-item>

<mdb-item-head mdbRippleRadius>

<i class="fa fa-chevron-right"></i> Dynamic links</mdb-item-head>

<mdb-item-body>

<ul>

<li>

<a href="#" class="waves-effect" mdbRippleRadius>{{selectedValue}}</a>

</li>

</ul>

</mdb-item-body>

</mdb-item>

And for me, everything is working fine. When i select value 'Link 1' from Material Select, this value is placed in my {{selectedValue}} place. And if I pick something else, automatically that value is passed to my sidenav link.

Let me know if my code works for you.

Best Regards,

Damian

itdev pro commented 6 years ago

Are you able to default to Link 2 on load?

Damian Gemza staff commented 6 years ago

For default select's value you have to follow instructions placed in our Material Select documentation: https://mdbootstrap.com/angular/advanced/material-select/#default-value And this value should be placed in ngAfterViewInit() to your nav link. Please try to experiment with my solution and these docs, and let me know. if something won't work for you. Best Regards, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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

itdev

Pro User 124Support score
19Questions 10Answers 0Snippets