Example of MDBDropdown Populated Dynamically

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.

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.