Whenever I input a string, it does not display properly within the designated textbox.
HTML
<mat-form-field class="favorite-fruits">
<mat-label>Favorite Fruits</mat-label>
<mat-chip-list #chipList aria-label="Fruit selection">
<mat-chip *ngFor="let fruit of fruits" (removed)="remove(fruit)">
{{fruit.name}}
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
<input placeholder="New fruit..."
[matChipInputFor]="chipList"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
</mat-form-field>
ts
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { MatChipInputEvent } from '@angular/material/chips';
export interface Fruit {
name: string;
}
@Component({
selector: 'my-story',
templateUrl: './my-story.component.html',
styleUrls: ['./my-story.component.scss']
})
export class MyStoryComponent implements OnInit {
fruits: Fruit[] = [];
add(event: MatChipInputEvent): void {
const value = (event.value || '').trim();
// Add our fruit
if (value) {
this.fruits.push({name: value});
}
}
remove(fruit: Fruit): void {
const index = this.fruits.indexOf(fruit);
if (index >= 0) {
this.fruits.splice(index, 1);
}
}
}
css
.favorite-fruits {
width: 100%;
}
https://i.stack.imgur.com/qQ3NU.png
This is the link I referenced: https://material.angular.io/components/chips/overview
Thank you for your assistance.