Kapitel
Deutsch (German)
github
DokumentationBlogBenchmarks
fontcolor_theme
Desktop UI

Dropdown

PreviewHTML
Toggle dropdownHover dropdown

Split buttonarrow_down

Menuarrow_down

API <dui-dropdown>(source)

searchclear

A dropdown component that can be used to display a list of items or content in a popup.

It can be opened and closed programmatically or via user interaction.

By monitoring the focused elements, it is possible to add interactive elements inside the dropdown.

Name
Description 
@Input() allowedFocus?: Element | ElementRef<any> | (Element | ElementRef<any>)[]
Additional elements that are allowed to have focus without closing the dropdown.cdk-global-overlay-wrapper 
@Input() center?: boolean
Whether the dropdown aligns to the horizontal center. 
@Input() connectedPositions?: ConnectedPosition[]
Additional positions to connect the dropdown to the target element. 
@Input() dropdownClass?: string
@Input() hasBackdrop?: boolean
@Input() height?: string | number
@Input() host?: Element | ElementRef<any>
If open() is called without a target, the host element is used as the target. THe target elements is allowed to have focus without closing the dropdown. 
@Input() keepOpen?: boolean
Keeps the dropdown open when it should be closed, ideal for debugging purposes. 
@Input() maxHeight?: string | number
@Input() maxWidth?: string | number
@Input() minHeight?: string | number
@Input() minWidth?: string | number
@Input() normalize-style?: boolean
@Input() overlay?: boolean
Whether is styled as overlay 
@Input() scrollbars?: boolean
Whether the dropdown should allow scrollbars. 
@Input() show?: boolean
@Input() width?: string | number
@Output() hidden?: void
Triggered when the dropdown is closed. 
@Output() lostFocus?: FocusEvent
Triggered when the dropdown loses focus and is about to close. 
@Output() showChange?: boolean
Triggered when the dropdown is opened or closed. 
@Output() shown?: void
Triggered when the dropdown is opened. 
dropdownTemplate: TemplateRef<any>
isOpen: WritableSignal<boolean>
overlayRef: OverlayRef
close(): void
Closes the dropdown if it is open. 
focus(): void
Focuses the dropdown element. 
open(target?: null | Element | EventTarget | ElementRef<any> | MouseEvent | "center", initiator?: HTMLElement | ElementRef<any> | { x: number; y: number; width: number; height: number; }): void
Opens the dropdown at the given target element or mouse position. 
setContainer(container: TemplateRef<any>): void
Sets the container template for the dropdown. 
setInitiator(initiator?: HTMLElement | ElementRef<any> | { x: number; y: number; width: number; height: number; }): void
toggle(target?: null | Element | EventTarget | ElementRef<any> | MouseEvent | "center"): boolean
Toggles the dropdown open or closed.

API <dui-dropdown-item>(source)

searchclear

Interactive item inside a dropdown.

<dui-dropdown>
    <dui-dropdown-item (click)="doSomething()">Click me</dui-dropdown-item>
    <dui-dropdown-item [selected]="true">Selected item</dui-dropdown-item>
    <dui-dropdown-item [disabled]="true">Disabled item</dui-dropdown-item>
</dui-dropdown>
Name
Description 
@Input() active?: boolean
Whether the button is active (pressed) 
@Input() checkbox?: boolean
When set to true, the item is optimised to display left-aligned checkboxes next to the text. 
@Input() closeOnClick?: boolean
@Input() disabled?: boolean
@Input() selected?: boolean
@Output() activeChange?: boolean
@Output() destroy?: void
activate(): void

API [openDropdown](source)

searchclear

A directive to open the given dropdown on regular left click.

<dui-dropdown #dropdown>
</dui-dropdown>
<dui-button [openDropdown]="dropdown">Open dropdown</dui-button>
Name
Description 
@Input() openDropdown?: DropdownComponent
@Input() openDropdownHover?: boolean
activeComponent: ActiveComponent | null
hiddenSub: OutputRefSubscription
openSub: OutputRefSubscription

API [openDropdownHover](source)

searchclear

A directive to open the given dropdown on mouseenter, and closes automatically on mouseleave. Dropdown keeps open when mouse enters the dropdown.

<dui-dropdown #dropdown>
</dui-dropdown>
<dui-button [openDropdownHover]="dropdown">Open on hover</dui-button>
Name
Description 
@Input() openDropdownHover?: DropdownComponent
@Input() openDropdownHoverCloseTimeout?: number
In milliseconds.

API [contextDropdown](source)

searchclear

A directive to open the given dropdown upon right click / context menu.

<dui-dropdown #dropdown>
</dui-dropdown>

<dui-button [contextDropdown]="dropdown">Open context menu</dui-button>
Name
Description 
@Input() contextDropdown?: DropdownComponent

API [dropdownContainer](source)

This directive is necessary if you want to load and render the dialog content only when opening the dialog. Without it, it is immediately rendered, which can cause performance and injection issues.

<dui-dropdown>
    <ng-container *dropdownContainer>
        Dynamically created upon dropdown instantiation.
    </ng-container>
</dui-dropdown>

API <dui-dropdown-splitter>, <dui-dropdown-separator>(source)

A component that acts as a visual separator or splitter inside a dropdown.

<dui-dropdown>
    <dui-dropdown-item>Item 1</dui-dropdown-item>
    <dui-dropdown-separator />
    <dui-dropdown-item>Item 2</dui-dropdown-item>
</dui-dropdown>