Text List Input

Overview

Use the text list input component to prompt the user to edit a list of strings.

Development

Web component development

Component reference

mat-chip-list, mat-chip

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>

Angular component development

Component reference

mat-chip-list, mat-chip

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>

Design

There are currently no design elements for the text list input component.