To implement editing existing items with Angular Material Chips, you'll need to use the matChipInput and matChip directives provided by Angular Material. The matChipInput directive allows users to add new chips, while the matChip directive represents each individual chip. When editing existing items, you'll need to populate the chips with the existing data and allow users to update or delete them.

Here's a step-by-step guide on how to achieve this:

  1. Install Angular Material and Angular CDK: Make sure you have Angular Material and Angular CDK installed in your Angular project.
bash
ng add @angular/material
  1. Import the required modules and add the Material Chip components in your Angular module:
typescript
import { MatIconModule } from '@angular/material/icon'; import { MatChipsModule } from '@angular/material/chips'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; @NgModule({ imports: [ MatIconModule, MatChipsModule, MatFormFieldModule, MatInputModule, // Other modules ], // Other declarations and providers }) export class YourModule { }
  1. Prepare your data: Suppose you have an array of items that you want to display as chips:
typescript
import { Component } from '@angular/core'; interface ChipItem { id: number; name: string; } @Component({ selector: 'app-chip-editor', templateUrl: './chip-editor.component.html', styleUrls: ['./chip-editor.component.css'] }) export class ChipEditorComponent { items: ChipItem[] = [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' } ]; newChip: string = ''; }
  1. Create the template with the chip input and chips:
html
<mat-chip-list> <mat-chip *ngFor="let item of items" (click)="editChip(item)">{{ item.name }}</mat-chip> <mat-form-field> <mat-label>Add new item</mat-label> <input matInput [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="addNewChip($event)"> </mat-form-field> </mat-chip-list> <mat-chip-list #chipList></mat-chip-list>
  1. Add the necessary methods to the component:
typescript
editChip(item: ChipItem) { // Here, you can implement the logic to open a dialog or a form for editing the selected chip item. console.log('Editing item:', item); } addNewChip(event: MatChipInputEvent): void { const input = event.input; const value = event.value; // Add the new item only if it is not empty and does not already exist in the array if (value.trim() && !this.items.find(item => item.name === value.trim())) { const newItem: ChipItem = { id: this.items.length + 1, name: value.trim() }; this.items.push(newItem); } // Clear the input value and close the input element if (input) { input.value = ''; } } separatorKeysCodes: number[] = [ENTER, COMMA];

With this implementation, existing items are displayed as chips, and users can add new chips. When a chip representing an existing item is clicked, you can implement a method like editChip to handle editing logic, such as opening a dialog or a form to update the item. The addNewChip method allows users to add new chips and prevents duplicates. The separatorKeysCodes array allows you to add chips when the user presses the Enter key or a comma.

Remember to adjust the code according to your specific use case and requirements.

Have questions or queries?
Get in Touch