CODEWITHSUNDEEP
angularbootstrap-4ng-bootstrap
Simone
Simone

Reputation: 27

angular 2 dropdown bootstrap 4 avoid close on click

As a title I need to avoid auto close on dropdown when click inside it, this is the code:

 <li class="nav-item dropdown">
                <div ngbDropdown class="d-inline-block">
                    <a class="nav-link dropdown-toggle" href="#" id="dropdownBasic1" autoClose="nonInput" ngbDropdownToggle ng-click="$event.preventDefault();$event.stopPropagation();return false;"> Signin</a>
                    <div class="dropdown-menu" aria-labelledby="dropdownBasic1">
                        <form>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Password</label>
                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputFile">File input</label>
                                <input type="file" id="exampleInputFile">
                                <p class="help-block">Example block-level help text here.</p>
                            </div>
                            <div class="checkbox">
                                <label>
                                <input type="checkbox"> Check me out
                                </label>
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div>
                </div>
            </li>

any idea? thanks in advance

Upvotes: 1

Views: 4667

Answers (2)

klagrida
klagrida

Reputation: 169

Use autoClose with your ngbDropdown like this :

<div ngbDropdown  autoClose="false"></div>

Upvotes: 4

Kld
Kld

Reputation: 7068

NgbCollapse is the best choice for this case, working plunker

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>

  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
    Toggle
  </a>
    <div class="dropdown-menu p-3" id="collapseExample" [ngbCollapse]="isCollapsed">
      <form>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputFile">File input</label>
          <input type="file" id="exampleInputFile">
          <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Check me out
          </label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </li>
</ul>

Upvotes: 2

Related Questions