Text List Input
Overview
Use the text list input component to prompt the user to edit a list of strings.
You can optionally include typeahead functionality that displays a list of available items that match the user’s input they’ve typed so far.
Development
Web component development
Component reference
mat-chip-list, mat-chip
Allows user to edit a list of text values within an editor
typeahead
Provides predictive typeahead list for your text list editor
Implementation
Use the Material Design Angular chip input component for editing a list of strings.
Begin by importing the MatChipsModule module into your application.
// import into app.module
import { MatChipsModule } from '@angular/material/chips';
@NgModule({
imports: [
...
MatChipsModule,
...
]
})
export class AppModule(){}
Import the following in the view’s controller.
import { MatChipInputEvent } from '@angular/material/chips';
import { COMMA, ENTER } from '@angular/cdk/keycodes';
Define a property that contains the list of string values entered by the user.
public selectedValues: string[] = [];
Define another property that specifies the list of delimiter keys that when typed by the user, will add the currently typed text to the list of string values. We use Enter and Comma as delimiter keys, meaning whenever the user presses either the Enter key or a comma, the text previously entered will be added as a new value to the list of string values.
public readonly separatorKeyCodes: number[] = [ENTER, COMMA];
Start with an outer div that has the rui-string-list-input-wrapper CSS class applied. Within the div, nest a mat-chip-list component for the chips and an input with the rui-string-list-input CSS class and matChipInput* directives for entering new values, as shown. Be sure to include the rui-tag-close-button component to display the close “X” icon; this is the user’s visual cue that they can click that element to remove it from the list.
In order to disable the list of strings and input, add the disabled directive to the mat-chip-list component.
<div class="rui-string-list-input-wrapper">
<mat-chip-list #stringList>
<!-- List of string values -->
<mat-chip *ngFor="let value of selectedValues" disableRipple [selectable]="false" (keydown.enter)="removeValue(value)"
(removed)="removeValue(value)" matChipRemove>
{{value}}
<rui-tag-close-button></rui-tag-close-button>
</mat-chip>
<!-- Editor for entering new string values -->
<input class="rui-string-list-input" placeholder="Enter a value..."
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
[matChipInputFor]="stringList"
[matChipInputSeparatorKeyCodes]="separatorKeyCodes"
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addValue($event)" />
</mat-chip-list>
</div>
Including Typeahead Functionality
If there is a well-defined list of values that the user can select from while editing the list of string values, consider adding typeahead functionality to your string list editing case. This allows the user to either select a matching value from the typeahead list or enter a new value.
We use the ngx-bootstrap Typeahead directive for adding typeahead functionality to an input. Begin by importing the TypeaheadModule into your application.
// import into app.module
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
@NgModule({
imports: [
...
TypeaheadModule,
...
]
})
export class AppModule(){}
Perform the same steps as for the base case above, importing the MatChipsModule into your application and setting up the same properties and components.
Define a boolean property to track whether the typeahead selection is currently being updated and default it to false. We’ll add this to an Enter keydown click event on the input to ensure that the matChipInputTokenEnd event and typeaheadOnSelect event don’t both add the string to the array.
public typeaheadSelectionInProgess: boolean = false;
In addition to that, define a string array property that specifies the typeahead options.
public animalList: string[] = ['Anteater', 'Bat', 'Cat', 'Dog', 'Elephant', 'Falcon', 'Gorilla', 'Hippo'];
From there, everything is the same as for the base case above, except you’ll add a keydown.enter event to update the typeaheadSelectionInProgess property to true, wire up the list of typeahead values, specify the number of items to display in the typeahead dropdown at a time, and an event handler that adds a typeahead value to the list of string values when selected from the dropdown.
Inside of the typeaheadOnSelect event method, check first if typeaheadSelectionInProgess is false before adding the string to the array and clearing out the input value.
<div class="rui-string-list-input-wrapper">
<mat-chip-list #stringListTypeahead>
<!-- List of string values -->
<mat-chip *ngFor="let value of selectedValues" disableRipple [selectable]="false" (keydown.enter)="removeValue(value)"
(removed)="removeValue(value)" matChipRemove>
{{value}}
<rui-tag-close-button></rui-tag-close-button>
</mat-chip>
<!-- Editor for entering new string values, with typeahead for selecting values -->
<input class="rui-string-list-input" formControlName="selectedAnimal" placeholder="Enter a value..."
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
[matChipInputFor]="stringListTypeahead"
[matChipInputSeparatorKeyCodes]="separatorKeyCodes"
[matChipInputAddOnBlur]="false"
(matChipInputTokenEnd)="addTag($event)"
[typeahead]="animalList"
[typeaheadOptionsLimit]="12"
(typeaheadOnSelect)="onTypeaheadSelect($event)" />
</mat-chip-list>
</div>
Angular component development
Component reference
mat-chip-list, mat-chip
Allows user to edit a list of text values within an editor
typeahead
Provides predictive typeahead list for your text list editor
Implementation
Use the Material Design Angular chip input component for editing a list of strings.
Begin by importing the MatChipsModule module into your application.
// import into app.module
import { MatChipsModule } from '@angular/material/chips';
@NgModule({
imports: [
...
MatChipsModule,
...
]
})
export class AppModule(){}
Import the following in the view’s controller.
import { MatChipInputEvent } from '@angular/material/chips';
import { COMMA, ENTER } from '@angular/cdk/keycodes';
Define a property that contains the list of string values entered by the user.
public selectedValues: string[] = [];
Define another property that specifies the list of delimiter keys that when typed by the user, will add the currently typed text to the list of string values. We use Enter and Comma as delimiter keys, meaning whenever the user presses either the Enter key or a comma, the text previously entered will be added as a new value to the list of string values.
public readonly separatorKeyCodes: number[] = [ENTER, COMMA];
Start with an outer div that has the rui-string-list-input-wrapper CSS class applied. Within the div, nest a mat-chip-list component for the chips and an input with the rui-string-list-input CSS class and matChipInput* directives for entering new values, as shown. Be sure to include the rui-tag-close-button component to display the close “X” icon; this is the user’s visual cue that they can click that element to remove it from the list.
In order to disable the list of strings and input, add the disabled directive to the mat-chip-list component.
<div class="rui-string-list-input-wrapper">
<mat-chip-list #stringList>
<!-- List of string values -->
<mat-chip *ngFor="let value of selectedValues" disableRipple [selectable]="false" (keydown.enter)="removeValue(value)"
(removed)="removeValue(value)" matChipRemove>
{{value}}
<rui-tag-close-button></rui-tag-close-button>
</mat-chip>
<!-- Editor for entering new string values -->
<input class="rui-string-list-input" placeholder="Enter a value..."
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
[matChipInputFor]="stringList"
[matChipInputSeparatorKeyCodes]="separatorKeyCodes"
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addValue($event)" />
</mat-chip-list>
</div>
Including Typeahead Functionality
If there is a well-defined list of values that the user can select from while editing the list of string values, consider adding typeahead functionality to your string list editing case. This allows the user to either select a matching value from the typeahead list or enter a new value.
We use the ngx-bootstrap Typeahead directive for adding typeahead functionality to an input. Begin by importing the TypeaheadModule into your application.
// import into app.module
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
@NgModule({
imports: [
...
TypeaheadModule,
...
]
})
export class AppModule(){}
Perform the same steps as for the base case above, importing the MatChipsModule into your application and setting up the same properties and components.
Define a boolean property to track whether the typeahead selection is currently being updated and default it to false. We’ll add this to an Enter keydown click event on the input to ensure that the matChipInputTokenEnd event and typeaheadOnSelect event don’t both add the string to the array.
public typeaheadSelectionInProgess: boolean = false;
In addition to that, define a string array property that specifies the typeahead options.
public animalList: string[] = ['Anteater', 'Bat', 'Cat', 'Dog', 'Elephant', 'Falcon', 'Gorilla', 'Hippo'];
From there, everything is the same as for the base case above, except you’ll add a keydown.enter event to update the typeaheadSelectionInProgess property to true, wire up the list of typeahead values, specify the number of items to display in the typeahead dropdown at a time, and an event handler that adds a typeahead value to the list of string values when selected from the dropdown.
Inside of the typeaheadOnSelect event method, check first if typeaheadSelectionInProgess is false before adding the string to the array and clearing out the input value.
<div class="rui-string-list-input-wrapper">
<mat-chip-list #stringListTypeahead>
<!-- List of string values -->
<mat-chip *ngFor="let value of selectedValues" disableRipple [selectable]="false" (keydown.enter)="removeValue(value)"
(removed)="removeValue(value)" matChipRemove>
{{value}}
<rui-tag-close-button></rui-tag-close-button>
</mat-chip>
<!-- Editor for entering new string values, with typeahead for selecting values -->
<input class="rui-string-list-input" formControlName="selectedAnimal" placeholder="Enter a value..."
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
[matChipInputFor]="stringListTypeahead"
[matChipInputSeparatorKeyCodes]="separatorKeyCodes"
[matChipInputAddOnBlur]="false"
(matChipInputTokenEnd)="addTag($event)"
[typeahead]="animalList"
[typeaheadOptionsLimit]="12"
(typeaheadOnSelect)="onTypeaheadSelect($event)" />
</mat-chip-list>
</div>
Design
There are currently no design elements for the text list input component.