Angular Components

ClrDropdown

ClrDropdown is the parent container for all child components and projected content. It allows users to choose an option or action from a contextual list. ClrDropdown can be nested inside of other ClrDropdown components.

Selector & Basic Usage

<clr-dropdown>
  <!-- trigger element -->
  <!-- menu component -->
</clr-dropdown>

Bindings

Binding	Type	Options	Default	Description
[clrCloseMenuOnItemClick]	input	true, false	true	When false the drop down is not closed if user clicks on menu items.

ClrDropdownMenu

ClrDropdown Menu component holds the menu items and projects group and seperator elements.

Selector & Basic Usage

<clr-dropdown>
  <!-- trigger -->
  <clr-dropdown-menu clrPosition="top-left">
    <!-- items, headers and separators -->
  </clr-dropdown-menu>
</clr-dropdown>

Bindings

Binding	Type	Options	Default	Description
[clrPosition]	input	top-left, top-right, right-top, right-bottom, bottom-right, bottom-left, left-bottom, left-top	bottom-left	Set the position orientation to the trigger anchor.

CSS

ClrDropdownMenu can contain optional elements that visually add a header and separator element between menu items. To use them, add an element with the appropriate class.

CSS Class	Host Element(s)	Type	Description	Required
.dropdown-divider	div		Styles the div as a divider element in the menu.	false
.dropdown-header	label		Styles the header element in the menu	false

Angular Directives

ClrDropdownTrigger

Selector & Basic Usage

<clr-dropdown>
  <button class="btn btn-primary" clrDropdownTrigger>
    Open Dropdown
  </button>
  <!-- clr-dropdown-menu element -->
</clr-dropdown>

ClrDropdownItem

Selector & Basic Usage

<clr-dropdown>
  <!-- trigger element -->
  <clr-dropdown-menu clrPosition="top-left">
    <div aria-label="Dropdown header Action 1" clrDropdownItem>Action 1</div>
    <div aria-label="Dropdown header Action 2" clrDropdownItem>Action 2</div>
  </clr-dropdown-menu>
</clr-dropdown>

Bindings

Binding	Type	Options	Default	Description
[clrDisabled]	input	true, false	null	Set the disabled attribute on the host element.
[id]	input	any string	Clarity adds an auto-incremented id	Allows a consumer supplied id to be set for the dropdown item host.

ClrIfOpen

ClrIfOpen is a structural directive applied to the ClrDropdownMenu element that manages the DOM creation and destruction for the menu elements.

Selector & Basic Usage

<clr-dropdown>
  <!-- trigger element -->
  <clr-dropdown-menu clrPosition="top-left" *clrIfOpen>
    <div aria-label="Dropdown header Action 1" clrDropdownItem>Action 1</div>
  </clr-dropdown-menu>
</clr-dropdown>

Bindings

Binding	Type	Options	Default	Description
[(clrIfOpen)]	two-way	true, false	false	Set the open / close state of element it is applied to.