NgbDropdown doesn't stay open

Question

I want to have a login dropdown in my navbar. However, as soon as something within the login form is clicked, the dropdown closes.

Another question: How can I make the dropdown appear aligned with the toggle on the right side? Right now it left-aligns with the toggle.

Here is my code:

<nav class="navbar navbar-dark bg-inverse">
   <ul class="nav navbar-nav">
      <li *ngIf="!user" class="nav-item dropdown float-xs-right">
        <div ngbDropdown autoClose="false" class="d-inline-block pull-left">
            <a class="nav-link" id="loginDropdown" aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>Login</a>
            <div class="dropdown-menu" aria-labelledby="loginDropdown">
                <login></login> <!--The login component, it's just a form-->
            </div>
        </div>
      </li>
   </ul>
</nav>

Answer 1

you are looking for the [autoClose] directive. Here is the official doc https://ng-bootstrap.github.io/#/components/dropdown as well as a plunker http://plnkr.co/edit/xiiYQqrP9OIdtOF7ifUO?p=preview

here is the relative code from the plunker

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

Answer 2

You're looking for autoClose with value "outside"

<div ngbDropdown [autoClose]="'outside'" >

The dropdown will close only on the outside clicks and not on menu clicks.