CODEWITHSUNDEEP
angularangular-bootstrap
SwapnilKumbhar
SwapnilKumbhar

Reputation: 367

Angular : how to add dynamic options in ngb-dropdown

I am using ngb-dropdown to show dropdown list in my application I have a scenario where I need to make an API call to get and show the dropdown items

I am trying to add options dynamically using *ngFor but seems that it's not working

Can anyone help with the right way to achieve this?

Below is the sample code

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" (click)="$event.stopPropagation()" id="dropdownBasic1" ngbDropdownToggle>Documents</button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <div *ngFor="let document in documents">
    <button ngbDropdownItem>document</button>
        </div>
    </div>
</div>

.ts file

@Component({
  selector: 'app-submission-table',
  templateUrl: './submission-table.component.html',
  styleUrls: ['./submission-table.component.scss']
})
export class SubmissionTableComponent{
    documents:[1,2,3];
}

Upvotes: 0

Views: 1253

Answers (2)

zainhassan
zainhassan

Reputation: 1780

Use let of instead on let in

*ngFor="let document of documents"

Upvotes: 1

Eliseo
Eliseo

Reputation: 57971

a *ngFor iterate over arrays. You can use pipe async to "iterate" over a observable that return an array

    <div *ngFor="let document in documents$|async">
      <button ngbDropdownItem>document</button>
    </div>

    documents$=this.serviceData.getDocuments();

    //your service will be who call to your API like
    getDocuments():Observable<string[]>{
        return this.httpClient(....)
    }

Upvotes: 1

Related Questions