Taiga UI 5.0 is out!

DataListWrapper KIT

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>