Docs / Angular multi-select dropdown component

Angular multi-select dropdown component

lib-easy-multi-select is a standalone Angular Material multi-select with search and select-all.

Usage

import { Dictionary, EasyMultiSelect } from 'easy-mat-ui-ng20';

@Component({
  standalone: true,
  imports: [EasyMultiSelect],
  template: `
    <lib-easy-multi-select
      title="Countries"
      [data]="countries"
      valueField="key"
      displayField="value"
      [clearable]="true"
      (change)="selected = $event">
    </lib-easy-multi-select>`
})
export class Demo {
  countries = [new Dictionary('dz', 'Algeria'), new Dictionary('fr', 'France')];
  selected: string[] = [];
}

Inputs and output

Name	Description
data	Items to choose from: Dictionary[] ({ key, value })
title	Label (translated)
valueField / displayField	Which property is emitted and which is shown (key or value)
selectedData	Items selected at start
clearable	Adds a button that empties the selection
readOnly	Shows the selection without letting the user change it
formField / appearance	Material form-field look: outline or fill
placeholder	Text shown while nothing is selected
compact	Dense 32 px field, used for column filters in table headers
(change)	Emits the selected values (string[]) on every change

Open the live demo or read the source on GitHub.