How to create Angular Material Chips unique to each expansion panel? - html

Question

My goal is to create Angular Material Chips that are unique to each expansion panel. For example, panel 1 should have chips called chip 1 and chip 2, while panel 2 should have chip 3 and chip 4. However, the panels should all show up on a singular page (such as localhost:4200).
When I run my current code, it produces chips that appear on every panel, and when a chip is deleted, it is deleted from every panel as well. I believe that the solution lies in creating an *ngFor loop with tags being replaced with p.tags, where adding a tag will be unique to that object’s tags array. However, I can’t figure out how push that data back into a singular object and then display that data on my html page.
Here's what the .ts code looks like.
import { Component, OnInit } from "#angular/core";
import { MatChipInputEvent } from "#angular/material/chips";
import { COMMA, ENTER } from "#angular/cdk/keycodes";
export interface People {
people: Person[];
}
export interface Person {
name: string;
id: string;
tags: string[];
}
#Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class PersonComponent implements OnInit {
persons;
visible = true;
selectable = true;
removable = true;
addOnBlur = true;
readonly separatorKeysCodes: number[] = [ENTER, COMMA];
tags: string[] = [];
constructor(private personService: PersonService) {}
ngOnInit() {
this.personService
.getStudents()
.subscribe((data) => (this.persons = data.persons));
}
add(event: MatChipInputEvent): void {
const input = event.input;
const value = event.value;
if ((value || "").trim()) {
this.tags.push(value.trim());
}
if (input) {
input.value = "";
}
}
remove(tag: string): void {
const index = this.tags.indexOf(tag);
if (index >= 0) {
this.tags.splice(index, 1);
}
}
}
Here's what the .html code looks like.
<mat-expansion-panel *ngFor="let p of persons>
<mat-expansion-panel-header [collapsedHeight]="'125px'" [expandedHeight]="'125px'">
{{ p.name }}
</mat-expansion-panel-header>
<mat-form-field>
<mat-chip-list #chipList>
<!-- tags should be switched to p.tags here I think -->
<mat-chip *ngFor="let tag of tags" [selectable]="selectable"
[removable]="removable" (removed)="remove(tag)">
{{tag}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="Add a tag"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
</mat-form-field>
</mat-expansion-panel>