ngbdropdown menu doesn't close after I clicked one of its items

I used ngb dropdown to display the different statuses that my task can have ('to do', 'in progress', 'done'). Everything works fine, but there is one small issue that's still bothering me. After clicking one of the options I want the dropdown menu to close. At the moment it remains open. How can I close this menu when I click on it?

as you can see below I changed the status on two posts, but the dropdown menu remains open, which is not really something I want



Template code

<div class="col-md-4 text-right padding-topright" style=" object-fit: cover;">
<div ngbDropdown class="d-inline-block">
<button class="btn btn-sm kbn-todo" *ngIf="post.task.status == 'to do'" id="dropdownDone" style=" color: white;"
ngbDropdownToggle>{{post.task.status}}</button>
<button class="btn btn-sm kbn-working" *ngIf="post.task.status == 'in progress'" id="dropdownDone" style=" color: white;"
ngbDropdownToggle>{{post.task.status}}</button>
<button class="btn btn-sm kbn-done" *ngIf="post.task.status == 'done'" id="dropdownDone" style=" color: white;"
ngbDropdownToggle>{{post.task.status}}</button>
<div ngbDropdownMenu aria-labelledby="dropdownToDo">
<button class="dropdown-item pumpkin-orange-bg" (click)="OnMarkTaskToDo(i, this.post._id)">To Do</button>
<button class="dropdown-item" (click)="OnMarkTaskInProgress(i, this.post._id)">In Progress</button>
<button class="dropdown-item" (click)="OnMarkTaskCompleted(i, this.post._id)">Done</button>
</div>
</div>
<p class="small font-weight-bold" style="margin-top: 5px" *ngIf="post.task?.due_to != 'Invalid date'"> due {{post.task?.due_to | date}}</p>
<!-- <p class="small font-weight-bold" style="margin-top: 5px"> status- {{post.task?.status}}</p> -->

</div>

Continue reading...