how to get selected chips list value in angular 6

questionsCategory: Questionshow to get selected chips list value in angular 6
preeti vedarthi asked 4 months ago

hi,
i have taken material chips control, i want to access values. please help
thanks in advance

1 Answers
Sandeep answered 4 months ago

Hi, if you are using material with angular 6 you need to follow below instruction. if of all you need to know how chips work and many variable,  control require to acheive this.

  • 1st you need to create autocomplete for whick value you want to do multi select (chips is also know as multi select option).
  • Push selected value’s object in an array.
  • Display selected values in chips formate.

Import dependancy in dependant module

  • import {MatChipsModule} from ‘@angular/material/chips’;
  • import {MatAutocompleteModule} from '@angular/material/autocomplete';

html code

<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip
      *ngFor="let fruit of fruits"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove(fruit)">
      {{fruit}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input
      placeholder="New fruit..."
      #fruitInput
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{fruit}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

ts code

Import Dependancy

import
{COMMA, ENTER} from '@angular/cdk/keycodes'; import {Component, ElementRef, ViewChild} from '@angular/core'; import {FormControl} from '@angular/forms'; import {MatAutocompleteSelectedEvent, MatAutocomplete} from '@angular/material/autocomplete'; import {MatChipInputEvent} from '@angular/material/chips'; import {Observable} from 'rxjs'; import {map, startWith} from 'rxjs/operators'; export class yourComponentClass {
visible = true; selectable = true; removable = true; addOnBlur = true; separatorKeysCodes: number[] = [ENTER, COMMA]; fruitCtrl = new FormControl(); filteredFruits: Observable<string[]>; fruits: string[] = ['Apple']; allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry']; @ViewChild('fruitInput', {static: false}) fruitInput: ElementRef<HTMLInputElement>; @ViewChild('auto', {static: false}) matAutocomplete: MatAutocomplete; constructor() { this.filteredFruits = this.fruitCtrl.valueChanges.pipe( startWith(null), map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice())); } add(event: MatChipInputEvent): void { // Add fruit only when MatAutocomplete is not open // To make sure this does not conflict with OptionSelected Event if (!this.matAutocomplete.isOpen) { const input = event.input; const value = event.value; // Add our fruit if ((value || '').trim()) { this.fruits.push(value.trim()); } // Reset the input value if (input) { input.value = ''; } this.fruitCtrl.setValue(null); } } remove(fruit: string): void { const index = this.fruits.indexOf(fruit); if (index >= 0) { this.fruits.splice(index, 1); } } selected(event: MatAutocompleteSelectedEvent): void { this.fruits.push(event.option.viewValue); this.fruitInput.nativeElement.value = ''; this.fruitCtrl.setValue(null); } private _filter(value: string): string[] { const filterValue = value.toLowerCase(); return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0); } }

 
For more details visit here