bug(Tabs): Content projection into mat-tab-nav-bar causes console errors

[davetorre]

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

We'd like to make a general TabsGroupComponent to avoid duplicating custom css. But when I project mat-tab-links into a mat-tab-nav-bar and click the tab links, I see this error: ERROR Error: undefined is not an object (evaluating 'this._tabNavBar._items.toArray')

Reproduction

See https://stackblitz.com/edit/angular-ivy-evhybc?file=src/app/app.component.html

Expected Behavior

In the stackblitz link, it would be nice if neither of the rows of links caused console errors when clicked.

Actual Behavior

Clicking links in the top row doesn't cause errors. Clicking links in the bottom row does cause errors.

Environment

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