CODEWITHSUNDEEP
htmlcssangular
tilly
tilly

Reputation: 2610

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

enter image description here

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>

Upvotes: 6

Views: 10048

Answers (4)

King Saozer
King Saozer

Reputation: 103

Please note that there is an HTML setting and there is a TypesScript setting for any component provided by Ngbootstrap. Your issue is due to the way you haven't import the NgbDropdownModule from @ng-bootstrap/ng-bootstrap. See the full documentation at https://ng-bootstrap.github.io/#/components/dropdown/examples

  1. TypeScript
import { Component } from '@angular/core';
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'ngbd-dropdown-basic',
    standalone: true,
    imports: [NgbDropdownModule],
    templateUrl: './dropdown-basic.html',
})
export class MyAngularComponent {
    // constructor and methods here
}
  1. HTML Template
    <div class="col text-end">
        <div ngbDropdown placement="top-end" class="d-inline-block">
            <button type="button" class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle>Toggle dropup</button>
            <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
                <button ngbDropdownItem>Action - 1</button>
                <button ngbDropdownItem>Another Action</button>
                <button ngbDropdownItem>Something else is here</button>
            </div>
        </div>
    </div>

Upvotes: 0

user10198153
user10198153

Reputation: 21

Use autoClose directive to prevent closing the dropdown

    <div ngbDropdown class="d-inline-block" [autoClose]="false">

Upvotes: 1

dpatryas
dpatryas

Reputation: 549

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

Upvotes: 10

Wesley Magalh&#227;es
Wesley Magalh&#227;es

Reputation: 64

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.

Upvotes: 3

Related Questions