bug(CHIPS): Empty getter throws error when used with NgFor

[karatesaul]

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

Attempting to use a MatChipSet, filled in with MatChips using NgFor, and then attempting to access the empty getter in an adjacent element (eg to show an empty message), results in the following error:

ERROR TypeError: Cannot read properties of undefined (reading 'length')
    at get empty [as empty] (chip-set.ts:196:30)
    at App_Template (main.ts:19:9)
    at ReactiveLViewConsumer.runInContext (reactive_lview_consumer.ts:94:5)
    at executeTemplate (shared.ts:314:8)
    at refreshView (change_detection.ts:194:7)
    at detectChangesInView (view_ref.ts:72:4)
    at detectChangesInComponent (view_ref.ts:41:7)
    at detectChangesInChildComponents (view_ref.ts:88:11)
    at refreshView (change_detection.ts:246:7)
    at detectChangesInternal (change_detection.ts:125:5)

Best I can tell this is because the getter has no safeguards to prevent being accessed before the chips ContentChildren has been initialized.

Reproduction

StackBlitz link: https://stackblitz-starters-xwsleo.stackblitz.io
Steps to reproduce:

1. Access the stackblitz link.
2. Open the developer console.

Expected Behavior

empty returns some sort of value.

Actual Behavior

empty throws an error.

Environment

• Angular: 16.1.3
• CDK/Material: 16.1.3
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu

[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.}