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
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. |
ClrDropdown Menu component holds the menu items and projects group and seperator elements.
Selector & Basic Usage
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
ClrDropdownItem
Selector & Basic Usage
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
Bindings
Binding | Type | Options | Default | Description |
[(clrIfOpen)] | two-way | true, false | false | Set the open / close state of element it is applied to. |