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>

If you question is about CSS/HTML, you just need to apply something as display: none in your menu container.

But you you question is about Angular, you will need something like this:

showMenu: boolean = false;

closeMenu() {
  let displayMenu = showMenu ? true : false;
  return displayMenu;
}

<div class="menu-container" *ngIf="showMenu">
<button class="close-menu" (click)="closeMenu()"></button>
</div>

This process can be done in very different ways and everything it will depend how you want to work, with animation, with a global event to click "out" of the menu and then the menu disappears, and on...

Anyway I hope these examples can make your path more clear.