Example of MDBDropdown Populated Dynamically


Topic: Example of MDBDropdown Populated Dynamically

dianalawless 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

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 commented 5 years ago

Bartosz, what does this code do? [attr.href]="d.href"


dianalawless 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.


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.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: 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