Angular 4 material chips placeholder not working properly

Question

I was trying to implement angular mat-chip with selectable and removable options. But issue is the placeholder move to top at the time of loading. i m not sure what wrong i am doing on code. Please someone help me to fix this issue.

Added GIF below

my code is

<mat-form-field>
  <mat-chip-list #chipList>
    <mat-chip *ngFor="let keyword of keywords" [selectable]="selectable"
             [removable]="removable" (remove)="remove(keyword)">
      {{keyword}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input placeholder="Keywords"
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add($event)" />
  </mat-chip-list>
</mat-form-field>

and ts is

  visible: boolean = true;
  selectable: boolean = true;
  removable: boolean = true;
  addOnBlur: boolean = true;
  separatorKeysCodes = [ENTER, COMMA];
  keywords= [];   // At time load i need this to be empty


public add(event: MatChipInputEvent): void {
    let input = event.input;
    let value = event.value;
    if ((value || '').trim()) {
        this.keywords.push(value.trim());
    }
    if (input) {
        input.value = '';
    }
}

public remove(keyword: any): void {
    let index = this.keywords.indexOf(keyword);
    if (index >= 0) {
        this.keywords.splice(index, 1);
    }
}

i used same code which given on material document but only change i done is instead of loading array values i am passing empty array at the time load. Please someone help me to fix this issue

Answer 1

its an issue with the keywords spelling in ts file. you have defined it as

  keyowords = [];

And the name you are referring to in the html file is keywords. Change the name in ts file to

keywords = [];

This is working stackblitz code for the same :- https://stackblitz.com/edit/angular-rtti3v?file=app%2Fchips-input-example.html