Angular : how to add dynamic options in ngb-dropdown

Question

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];
}

Answer 1

Use let of instead on let in

*ngFor="let document of documents"