Angular4 Material chipset+autocomplete

Question

I was developing functionality like tagging system in stackoverflow using angular 4 's chipset and autocomplete features. Here is the piece of code i wrote. It is not working

<mat-form-field class="col-md-4 col-md-offset-2">
                  <mat-chip-list #chipList>
                    <mat-chip *ngFor="let item of displayItems" [selectable]="selectable"
                             [removable]="removable" (remove)="remove(item)">
                      {{item}}
                      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                    </mat-chip>
                    <input placeholder="Enter Items..."  
                           [matChipInputFor]="chipList"
                           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                           [matChipInputAddOnBlur]="addOnBlur"
                           (matChipInputTokenEnd)="add($event)" matInput  [matAutocomplete]="auto"/>

                           <mat-autocomplete #auto="matAutocomplete">
                                <mat-option *ngFor="let option of options" [value]="option">
                                    {{ option }}
                                </mat-option>
                            </mat-autocomplete>

                  </mat-chip-list>
                  <mat-hint align="end">Press comma or enter after each selection</mat-hint>
                </mat-form-field>

And following is in TS file : options is basically from where autocomplete will select.

snacksType: String[];

  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;
  options=['banana','apple','jackfruit','mango', 'grapes', 'kiwi'];
  // Enter, comma
  separatorKeysCodes = [ENTER, COMMA];

  displayItems = [];

add(event: MatChipInputEvent): void {
      let input = event.input;
      let value = event.value;

      // Add our item
      if ((value || '').trim()) {
        this.displayItems.push(value.trim());
      }

      // Reset the input value
      if (input) {
        input.value = '';
      }
    }

    remove(item: any): void {
      let index = this.displayItems.indexOf(item);

      if (index >= 0) {
        this.displayItems.splice(index, 1);
      }
    }

Answer 1

You can use @Output (optionSelected) in "mat-autocomplete" and push the new item.

snacksType: String[];

  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;
  options=['banana','apple','jackfruit','mango', 'grapes', 'kiwi'];
  // Enter, comma
  separatorKeysCodes = [ENTER, COMMA];

  displayItems = [];

add(event: MatChipInputEvent): void {
      let input = event.input;
      let value = event.value;

      // Add our item
      if ((value || '').trim()) {
        this.displayItems.push(value.trim());
      }

      // Reset the input value
      if (input) {
        input.value = '';
      }
    }

    remove(item: any): void {
      let index = this.displayItems.indexOf(item);

      if (index >= 0) {
        this.displayItems.splice(index, 1);
      }
    }

public addSelect(event) {
    let option = event.option;
    let value = option.value;
    if ((value || '').trim()) {
      this.fruits.push({ name: value.trim() });
    }
}

In your mat-autocomplete add (optionSelected)="addSelect($event)"

<mat-form-field class="col-md-4 col-md-offset-2">
                  <mat-chip-list #chipList>
                    <mat-chip *ngFor="let item of displayItems" [selectable]="selectable"
                             [removable]="removable" (remove)="remove(item)">
                      {{item}}
                      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                    </mat-chip>
                    <input placeholder="Enter Items..."  
                           [matChipInputFor]="chipList"
                           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                           [matChipInputAddOnBlur]="addOnBlur"
                           (matChipInputTokenEnd)="add($event)" matInput  [matAutocomplete]="auto"/>

                           <mat-autocomplete #auto="matAutocomplete" (optionSelected)="addSelect($event)">
                                <mat-option *ngFor="let option of options" [value]="option">
                                    {{ option }}
                                </mat-option>
                            </mat-autocomplete>

                  </mat-chip-list>
                  <mat-hint align="end">Press comma or enter after each selection</mat-hint>
                </mat-form-field>

Answer 2

It is not working because you have not added any control on our input to detect value change

<input placeholder="Enter Items..."  
                       [formControl]="displayCtrl"
                       [matChipInputFor]="chipList"
                       [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                       [matChipInputAddOnBlur]="addOnBlur"
                       (matChipInputTokenEnd)="add($event)" matInput  [matAutocomplete]="auto"/>