<mk-dropdown toggleText="Basic Toggle" buttonStyleClass="btn btn-success dropdown-toggle">
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a href="#">Separated link</a></li>
</mk-dropdown>

<button #separatedToggleElement type="button" class="btn btn-warning dropdown-toggle">
  Separated Toggle <span class="fa fa-info-circle"></span>
</button>

Then, somewere else...

<mk-dropdown [toggleElement]="separatedToggleElement">
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a href="#">Separated link</a></li>
</mk-dropdown>

Action

Another action

Something else here

Separated link

<div class="input-group">
  <div mk-dropdown class="input-group-btn" [isWrapper]="false">
    <mk-dropdown-toggle>
      <button #toggleElement type="button" class="btn btn-default dropdown-toggle">
        Input Toggle
        <span class="fa fa-caret-down"></span>
      </button>
    </mk-dropdown-toggle>
    <mk-dropdown-menu>
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </mk-dropdown-menu>
  </div>
  <input type="text" class="form-control">
</div>

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
  <div mk-dropdown class="btn-group" [isWrapper]="false">
    <mk-dropdown-toggle>
      <button #toggleElement type="button" class="btn btn-default dropdown-toggle">
        <span class="fa fa-caret-down"></span>
      </button>
    </mk-dropdown-toggle>
    <mk-dropdown-menu>
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </mk-dropdown-menu>
  </div>
</div>

Name	Type	Default	Description
buttonStyleClass	string	btn btn-default dropdown-toggle	Defines the toggle button classes.
contentStyleClass	string	null	Defines the content list classes.
isCollapsed	boolean	true	Defines if dropdown is collapsed.
isWrapper	boolean	true	Defines if dropdown component is wrapped by a div.
styleClass	string	dropdown	The dropdown style classes.
toggleElement	Element	null	Set the toggle dropdown element if outside of the component or within mk-dropdown-toggle.
toggleText	string	null	The dropdown toggle text if default button used.

Name	Parameters	Description
onCollapseStart	event: browser event	Callback to invoke before dropdown toggle
onCollapseDone	event: browser event	Callback to invoke after dropdown toggle