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

Question

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>

Answer 1

You can do something like this:
<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
<button class="btn btn-outline-primary mr-2" id="dropdownManual" ngbDropdownAnchor (focus)="myDrop.open()">Toggle dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownManual">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>
<button class="btn btn-outline-danger mr-2" (click)="myDrop.close();">Close from outside</button>
Take a closer look on:
#myDrop="ngbDropdown"
And:
(click)="myDrop.close();"
I suppose there are many people which would like this solution.
This is an example taken from: https://ng-bootstrap.github.io/#/components/dropdown/examples

Answer 2

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.