Taiga UI 5 is out!

DataListWrapper KIT v5.0.0+

Examples API GitHub

On this page

DataListWrapper is an abstraction over DataList to simplify usage in common cases where precise control is not necessary.

Disables items that start with T

    
      
    
    
      <tui-textfield [disabledItemHandler]="disabledItemHandler">
    <input
        #input
        tuiInput
        [formControl]="control"
    />
    <label tuiLabel>Account</label>

    @if (items | tuiFilterByInput; as filtered) {
        @if (input.value) {
            <tui-data-list-wrapper
                *tuiDropdown
                emptyContent="No results found"
                size="s"
                [items]="filtered"
            />
        }
    }
</tui-textfield>

    

Custom item content

    
      
    
    
      <label tuiLabel>
    Type a name:

    <tui-textfield
        tuiChevron
        [stringify]="stringify"
        [tuiTextfieldCleaner]="false"
    >
        <input
            placeholder="Account"
            tuiComboBox
            [formControl]="control"
        />

        <tui-data-list-wrapper
            *tuiDropdown
            [itemContent]="stringify | tuiStringifyContent"
            [items]="items | tuiFilterByInput"
        />
    </tui-textfield>
</label>

    

Group by labels

    
      
    
    
      <tui-textfield>
    <input
        #input
        tuiInput
        [formControl]="control"
    />
    <label tuiLabel>Menu</label>
    @if (input.value) {
        <tui-data-list-wrapper
            *tuiDropdown
            [items]="items"
            [labels]="labels"
        />
    }
</tui-textfield>