'mat-chip-list' is not a known element

Question

I'm trying to use mat-chip in a component. My code used to work before I upgraded to Angular 15

I am importing the module, which seems to be a common mistake

I think I've included everything according to the docs.

Assistance much appreciated. Thanks

The error is:

Error: src/app/app.component.html:1:1 - error NG8001: 'mat-chip-list' is not a known element:
1. If 'mat-chip-list' is an Angular component, then verify that it is part of this module.
2. If 'mat-chip-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <mat-chip-list>
  ~~~~~~~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

The version info is:

Angular CLI: 15.0.0-rc.3
Node: 16.14.0
Package Manager: npm 9.1.1
OS: linux x64

Angular: 15.0.0-rc.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0-rc.3
@angular-devkit/build-angular   15.0.0-rc.3
@angular-devkit/core            15.0.0-rc.3
@angular-devkit/schematics      15.0.0-rc.3
@angular/cdk                    15.0.0-rc.2
@angular/material               15.0.0-rc.2
@schematics/angular             15.0.0-rc.3
rxjs                            7.5.7
typescript                      4.8.4

My app.modules.ts:

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { MatChipsModule } from '@angular/material/chips';


@NgModule({
    declarations: [
       AppComponent
    ],
    imports: [
       MatChipsModule
    ],
    exports: [
    ],
    providers: [
    ],
    bootstrap: [AppComponent],
       entryComponents: [ 
    ]

})
export class AppModule` { }

and my component:

`<mat-chip-list>
    <mat-chip>
        Dog one
    </mat-chip>
    <mat-chip color="primary">
       Dog two
    </mat-chip>
    <mat-chip color="accent">
       Dog three
    </mat-chip>
</mat-chip-list>`

and component.ts:

   import { Component } from '@angular/core';

   @Component({
      selector: 'chips-example',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
  })
  export class AppComponent
  {
  }

Answer 1

Angular Material v15 switches to MDC based components, which have some breaking changes. There is a migration guide for chips, which states that the <mat-chip-list> component was removed and replaced by three alternative components:

1. <mat-chip-listbox> with <mat-chip-option> should be used when the chips can be selected by the user
2. <mat-chip-grid> with <mat-chip-row> should be used when text inputs interact with chips
3. <mat-chip-set> with <mat-chip> should be used when you implement a custom accessibility pattern

Alternatively, you can use the "old" chips implementation in v15 and v16 by importing MatLegacyChipsModule. However, this approach is deprecated and since Angular Material v17 it is removed. In Angular v17 and v18 you can still use Angular Material v16 and the legacy components, see the Angular 17 announcement.

Answer 2

Alternatively, You can try mat-chip-grid with mat-chip-row. It solved my problem.

https://material.angular.io/components/chips/overview#text-entry