Authors:Zhicheng Wang

• html
• ts
• scss
• spec.ts

<div class="row">
  <div class="col-md-6">
    <div #dropdown1="uiToggle" (uiClickOutside)="dropdown1.close()" class="dropdown" uiToggle>
      <button (click)="dropdown1.toggle()" class="btn btn-primary dropdown-toggle" type="button">
        <span i18n>Dropdown Button</span>
      </button>
      <div *ngIf="dropdown1.isOn" (click)="dropdown1.close()" class="dropdown-menu">
        <a class="dropdown-item" i18n>Action</a>
        <a class="dropdown-item" i18n>Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" i18n>Something else here</a>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div #dropdown2="uiToggle" (uiClickOutside)="dropdown2.close()" class="dropdown" uiToggle>
      <button (click)="dropdown2.toggle()" class="btn btn-primary dropdown-toggle" type="button">
        <span i18n>Another Dropdown</span>
      </button>
      <div *ngIf="dropdown2.isOn" (click)="dropdown2.close()" class="dropdown-menu">
        <a class="dropdown-item" i18n>Action</a>
        <a class="dropdown-item" i18n>Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" i18n>Something else here</a>
      </div>
    </div>
  </div>
</div>