ng2-encrm-components/src/app/element-list/elements/dropdowns-preview/dropdowns-preview.component.html

angular 2 components

<div class="col-xs-12">
  <!-- Simple dropdown -->
  <h1 id="dropdowns">Dropdowns</h1>
  <p class="lead">
    from <a href="https://valor-software.com/ng2-bootstrap/#/dropdowns" target="_blank">ng2-bootstrap</a>
  </p>
  <span dropdown (onToggle)="toggled($event)">
    <a href id="simple-dropdown" dropdownToggle>
      Click me for a dropdown, yo!
    </a>
    <ul class="dropdown-menu" dropdownMenu aria-labelledby="simple-dropdown">
      <li *ngFor="let choice of items">
        <a class="dropdown-item" href="#">{{choice}}</a>
      </li>
    </ul>
  </span>

  <!-- Single button -->
  <div class="btn-group" dropdown [(isOpen)]="status.isopen">
    <button id="single-button" type="button" class="btn btn-primary" dropdownToggle
            [disabled]="disabled">
      Button dropdown <span class="caret"></span>
    </button>
    <ul dropdownMenu role="menu" aria-labelledby="single-button">
      <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
      <li class="divider dropdown-divider"></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>

  <!-- Split button -->
  <div class="btn-group" dropdown>
    <button id="split-button" type="button" class="btn btn-danger">Action</button>
    <button type="button" class="btn btn-danger dropdown-toggle" dropdownToggle>
      <span class="caret"></span>
      <span class="sr-only">Split button!</span>
    </button>
    <ul class="dropdown-menu" dropdownMenu role="menu" aria-labelledby="split-button">
      <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
      <li class="divider dropdown-divider"></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>

  <hr/>
  <p>
    <button type="button" class="btn btn-primary btn-sm" (click)="toggleDropdown($event)">Toggle
      button dropdown
    </button>
    <button type="button" class="btn btn-warning btn-sm" (click)="disabled = !disabled">
      Enable/Disable
    </button>
  </p>

  <hr>
  <!-- Single button with keyboard nav -->
  <div class="btn-group" dropdown keyboardNav="true">
    <button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" dropdownToggle>
      Dropdown with keyboard navigation <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" dropdownMenu role="menu" aria-labelledby="simple-btn-keyboard-nav">
      <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
      <li class="divider dropdown-divider"></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <br><br>
  <h2>Non-button dropdown:</h2>
  <p class="lead">from <code>ButtonDropdownComponent</code></p>
  <button-dropdown>
    <!--[content] element is the trigger-->
    <span content class="material-icons" style="font-size: 3rem">attachment</span>

    <!--[list] element(s) will be listed in dropdown menu-->
    <ul list class="dropdown-menu">
      <li class="dropdown-item"><a>elem</a></li>
      <li class="dropdown-item"><a>elem</a></li>
      <li class="dropdown-item"><a>elem</a></li>
    </ul>
  </button-dropdown>
  <tabset>
    <tab heading="HTML">
      <pre><code highlight class="html">
  &lt;button-dropdown&gt;
    &lt;!--[content] element is the trigger--&gt;
    &lt;span content class=&quot;material-icons&quot;&gt;attachment&lt;/span&gt;

    &lt;!--[list] element(s) will be listed in dropdown menu--&gt;
    &lt;ul list class=&quot;dropdown-menu&quot;&gt;
      &lt;li class=&quot;dropdown-item&quot;&gt;&lt;a&gt;elem&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;dropdown-item&quot;&gt;&lt;a&gt;elem&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;dropdown-item&quot;&gt;&lt;a&gt;elem&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/button-dropdown&gt;
      </code></pre>
    </tab>
    <tab heading="TypeScript">
      <pre><code highlight class="typescript">
  none
      </code></pre>
    </tab>
  </tabset>

</div>