bug(MatFormField): Rendering MatChips within a MatChipGrid using NgTemplateOutlet breaks the floating label.

[201549BL]

Description

Rendering MatChips within a MatChipGrid using NgTemplateOutlet breaks the floating label.

Reproduction

StackBlitz link: https://stackblitz.com/edit/itsykq?file=src%2Fexample%2Fchips-form-control-example.ts

Expected Behavior

I expected the rendered chip template to work as normal chip.

Actual Behavior

What happens is that when we click away from the input field, the float label floats down, making the label obstructed by the chips added.

Environment

• Angular: 17.1
• CDK/Material: 17.1
• Browser(s): Chrome
• Operating System: macOS

[wscott-retro]

Hi, I know this issue is not relevant to core functionality, I would like to contribute, and would like to work on this for my first issue, if no one else is looking at it?

[ErikAlbert]

This issue occurs because MatChipGrid has no chips on it's initial rendering, so, it sets it's empty property as true.

If a wrapper component on the chips is an option, capturing a reference from MatChipGrid and adding the chips later works:

@ViewChild(MatChipGrid)
  matChipGrid!: MatChipGrid;
@ViewChildren(ChipComponentWrapperComponent)
  chipComponentList!: QueryList<ChipComponentWrapperComponent>;

  ngAfterViewInit() {
   const chips = this.chipComponentList.map((chip) => {
      const matChipRow = chip.matChipRow;
      return matChipRow;
    });
    const chipsQueryList = new QueryList<MatChipRow>();
    chipsQueryList.reset(chips);
    this.matChipGrid._chips = chipsQueryList;
    this.matChipGrid.stateChanges.next();
  }

The main problem of this approach is that for every action on the grid (delete, update or add) the chips must be added every time to the container and stateChanges must be called because they are not updated automatically.