MatTabNavBar InkBar not showing active tab when rendered without data

[wratho]

Reproduction

https://stackblitz.com/edit/angular-jpbc7v

I believe the root of the issue is when the mat-tab-nav-bar is rendered before the data the fills the nav-bar is available. In the stackblitz you will see in the data-send.ts file two ways of assigning links to be passed into the nav-bar. With the timeout the ink-bar does not indicate the active tab, but without the timeout it does.

EDIT: a relatively simple fix is to either add *ngIf="links" to the data-send.html or on the actual

Expected Behavior

Ink-bar should indicate active tab regardless on when the data for the nav-bar is present.

Actual Behavior

Ink-bar only shows active tab if data is present before nav-bar is rendered

Environment

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

[crisbeto]

There's a minor issue with your example: you've set [active]="true" on all tabs which will try mark all of them as selected. It should be [active]="activeLink === link". That being said, this isn't what's preventing the active tab from being highlighted. I've submitted #16624 to fix it.

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