Type MatChipGrid is not assignable to type MatChipGrid & MatLegacyChipList

[seyfer]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Just by following the example of Chips with Input from official documentation for v16 Material

https://v16.material.angular.io/components/chips/overview#chips-connected-to-an-input-field

I have the following error with this code

<mat-form-field class="example-chip-list">
  <mat-label>Favorite Fruits</mat-label>
  <mat-chip-grid #chipGrid aria-label="Enter fruits">
    <mat-chip-row *ngFor="let fruit of fruits"
                  (removed)="remove(fruit)"
                  [editable]="true"
                  (edited)="edit(fruit, $event)"
                  [aria-description]="'press enter to edit ' + fruit.name">
      {{fruit.name}}
      <button matChipRemove [attr.aria-label]="'remove ' + fruit.name">
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-chip-row>
    <input placeholder="New fruit..."
           [matChipInputFor]="chipGrid"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add($event)"/>
  </mat-chip-grid>
</mat-form-field>

specifically, at [matChipInputFor]="chipGrid"

the error is:

Type MatChipGrid is not assignable to type MatChipGrid & MatLegacyChipList   
Type MatChipGrid is not assignable to type MatLegacyChipList

There is SO question with the same issue, without an answer.
https://stackoverflow.com/questions/76497544/mat-chip-grid-is-not-assignable-to-mat-chip-grid-and-mat-legacy-chip-list

Reproduction

Steps to reproduce:

1. just follow https://v16.material.angular.io/components/chips/overview#chips-connected-to-an-input-field

Expected Behavior

No TS error when assigning chip grid template to matChipInputFor
[matChipInputFor]='chipGrid'

Actual Behavior

TS error at [matChipInputFor]='chipGrid', see in the description.

Environment

• Angular: v16 latest
• CDK/Material: v16 latest
• Browser(s): any
• Operating System (e.g. Windows, macOS, Ubuntu): Linux, any

[seyfer]

This can be closed. For some reason, IDE imported legacy versions automatically

import { MatLegacyChipsModule } from '@angular/material/legacy-chips';
import { MatLegacyFormFieldModule } from '@angular/material/legacy-form-field';

However non-legacy components need to be used.

For whoever will want to use Legacy, there is a solution.

Add in the component:
@ViewChild('chipGrid', { static: true }) chipGridLegacy!: MatChipGrid & MatLegacyChipList;

and use it for binding
[matChipInputFor]="chipGridLegacy"

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}