Topic: Example of MDBDropdown Populated Dynamically
dianalawless
free
asked 5 years ago
Expected behavior dynamically populate dropdown Actual behavior explicitly populating dropdown Resources (screenshots, code snippets etc.) This is code from your sample where dropdown values are explicitly populated. I have data from a service - need syntax for linking data source. getLocations() { this.dataService.getLocations().subscribe(data => { this.locations = data; });
Location Action Another action Something else here Separated link
Bartosz Termena
staff
answered 5 years ago
Dear @dianalawless
It is just angular-2 attribute syntax.
<div [attr.href]="yourhref">
It binds attribute href to the result of expression yourhref
.
We do not have example of how to dynamically populate dropdown, we will add it as soon as possible.
For more information I refer you to: https://angular.io/guide/displaying-data
To utilize the selected results, you can add onClick
function, liek below:
<div class="dropdown" mdbDropdown>
<button
mdbDropdownToggle
mdbBtn
color="primary"
class="dropdown-toggle waves-light"
type="button"
mdbWavesEffect
>
Dropdown primary
</button>
<div class="dropdown-menu dropdown-primary">
<a class="dropdown-item" *ngFor="let d of data" target="_blank" [attr.href]="d.href" (click)="onClick(d.name)">{{
d.name
}}</a>
</div>
and then in your TS:
onClick(e) {
console.log(e);
}
you can do what you want.
Hope it helps!
Best, Bartosz.
Bartosz Termena
staff
answered 5 years ago
Dear @dianalawless
Below is an example of how to dynamically populate dropdown:
HTML:
<div class="col-md-12 mx-auto my-5">
<div class="dropdown" mdbDropdown>
<button
mdbDropdownToggle
mdbBtn
color="primary"
class="dropdown-toggle waves-light"
type="button"
mdbWavesEffect
>
Dropdown primary
</button>
<div class="dropdown-menu dropdown-primary">
<a class="dropdown-item" *ngFor="let d of data" target="_blank" [attr.href]="d.href">{{
d.name
}}</a>
</div>
</div>
</div>
TS:
data: any = [];
ngOnInit() {
this.data = [
{
name: 'Angular',
href: 'https://mdbootstrap.com/docs/angular/',
},
{
name: 'Main Page',
href: 'https://mdbootstrap.com/',
},
];
}
Hope it helps!
Best, Bartosz.
dianalawless free commented 5 years ago
Bartosz, what does this code do? [attr.href]="d.href"
dianalawless free commented 5 years ago
and can you send me a link to the documentation for that above code. and can I get a sample of code to utilize the selected results.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.1.1
- Device: desktop
- Browser: Chrome
- OS: Windows 10 64-bit
- Provided sample code: No
- Provided link: No