I am currently facing an issue with my angular material chip component. The versions I am using are Angular 16 and Material 16.
Here are all my dependencies:
"@angular/animations": "^16.0.4",
"@angular/cdk": "^16.0.4",
...
"zone.js": "~0.13.0"
This is the code snippet of my angular template:
<mat-chip-grid #chipGrid aria-label="Enter fruits">
...
</mat-chip-grid>
In the Chrome Developer Tools, I noticed this:
Upon digging deeper, it directs me to the specific area of my template code.
You can find a working example on StackBlitz:
https://stackblitz.com/run?file=src%2Fexample%2Fchips-form-control-example.ts
Here are the imports in my TypeScript chip class:
Below is the code for my Material Chip Module:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialChipsInputComponent } from './materialChipsInput.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
...
@NgModule({
imports: [
CommonModule,
BrowserAnimationsModule,
MaterialModule,
MatChipsModule,
MatIconModule,
MatFormFieldModule,
MatLegacyChipsModule,
ReactiveFormsModule
],
declarations: [
MaterialChipsInputComponent
],
exports:[MaterialChipsInputComponent]
})
export class MaterialChipsInputModule {
}