Angular Material 4 Procurement Not Working Properly

Question

I tried to implement an angular matte chip with select and delete options. But the problem is that the placeholder jumps to the top during loading. I'm not sure what I am doing with the code. Please help me solve this problem.

GIF is added below

my code

<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 the same code that is indicated on the material document, but only the change I made, instead of loading the values ​​of the array. I skip an empty array at boot time. Please help me solve this problem.

Answer 1

I upgraded Angular from 4.4.X to the latest 5.2.2. The problem is fixed. It seems to be an Angular bug.

Answer 2

a problem with the spelling of keywords in the ts file. You defined it as

  keyowords = []; 

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

 keywords = []; 

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

Answer 3

I had the same problem, but it worked in angular version 5 .

When I updated it to Corner 7 it stopped working.

For this to work, you will have to replace (delete) = "yourfunction ()" with (removed) = "yourfunction ()" .

Enjoy..