Angular material multi-select with autocomplete

This document is about my open source component mat-select-autocomplete.

mat-select-autocomplete gives feature of autocomplete on top of angular 2+ material mat-select.

Problems with Angular 2+ Material mat-select:

1. mat-select does not have autocomplete
2. mat-select does not provide of option to select all or deselect all
3. Ability to select / unselect partial list which is being filtered

mat-select-autocomplete solves all above specified problems.

Installation:

npm install mat-select-autocomplete --save
import { SelectAutocompleteModule } from ‘mat-select-autocomplete’;

Add SelectAutocompleteModule to your AppModule import list

This is material component, so please make sure your have followed Get started with Angular Material document to add material to your project

Add material theme to your styles.scss

@import “~@angular/material/prebuilt-themes/indigo-pink.css”;

Add Material icons fonts file to your index.html

<link href=”https://fonts.googleapis.com/icon?family=Material+Icons" rel=”stylesheet”>

1. <mat-select-autocomplete> with below configurations to your component which requires multiselect.

Configurations:

Inputs:

placeholder (String): A placeholder value for your mat-select

selectPlaceholder(String): Placeholder for options filtering

options (Array of objects): Options object to be listed

selectedOptions (Array of Strings): To pre-populate or preselect options

display (String): Property of every option for display in dropdown

value (String): Property of every option to be returned on option selection;

required (Boolean): To make your mat-field required. Default : false;

multiple (Boolean): Able to select multiple or single. Default: true;

disabled (Boolean): To disable the mat-field. default: false;

appearance (String): Appearance of your mat-field. Supported options: 'legacy' | 'standard' | 'fill' | 'outline';

formControl (String): If you’re using Angular reactive form, bind your formControl with mat-select-autocomplete output

showErrorMsg (Boolean): Whether show error message or not. Default: false;

errorMsg (String): Custom error message. Default: ‘Field is required’

labelCount (Number): Number of selected options to be shown in display of mat-select. Default: 1.

Outputs:

selectionChange (EventEmitter): On every option selection, this event would be emitted. You could capture the selected options values [Array of Strings] from this event param.

ViewChild:

If you want to toggle mat-select-autocomplete from your own component event, you need to import MultiselectComponent in the component and take it’s reference as ViewChild element (eg: matSelect). Now you could trigger this.matSelect.toggle() to toggle the dropdown.

Eg:

// Import component
import { SelectAutocompleteComponent } from 'mat-select-autocomplete';
// Refer it with viewchild
@ViewChild(SelectAutocompleteComponent) multiSelect: SelectAutocompleteComponent;
// On your event, toggle dropdown
onToggleDropdown() {
   this.multiSelect.toggleDropdown();
}

If you want to disable a specific option, add

option.disabled = true

Demo with normal field:

Demo with reactive forms:
https://stackblitz.com/edit/mat-select-autocomplete-formcontrol

Upcoming Features :

Please let me know in comments, if any specific feature is required in this library.

Have you wondered how to make your page responsive [without any third party framework such as bootstrap] with minimal code ? I have written interesting mixin for making your web page responsive. Please refer… https://medium.com/@cryptoipl/scss-mixins-for-responsive-design-utilities-classes-4194a25e7a99. It makes your life easier.