[Tabs] mat-ink-bar doesn't update with the active state

[briananderson1222]

Bug, feature request, or proposal:

Bug when modifying the active state of a tab inside of a mat-tab-nav-bar on the mat-tab-link the mat-ink-bar does not appropriately update its state.

What is the expected behavior?

If all tabs in the tab-nav-bar are not active, there should not be an underline for a given tab

What is the current behavior?

Once a tab in a mat-tab-nav-bar has been active once the mat-ink-bar will persist its state even if the mat-tab-link is no longer active.

Stackblitz Demo (https://stackblitz.com/edit/angular-t7jjle) which shows your issue:

Detailed Reproduction Steps:

1. Navigate to https://angular-t7jjle.stackblitz.io/1

2. Notice that the active state is assigned to state 1 (with ink bar active)

3. Click navigation to state 3 (this navigation happens outside of the tab bar)

4. Note that the active state for Tabs 1 and 2 are now inactive (you can notice the text on the tab changes), but the ink-bar persists

5. Navigate to https://angular-t7jjle.stackblitz.io/3

6. Notice that there are are no active tabs AND ink-bar is NOT present

7. Once an active state has been defined (clicking on 1 or 2), there is no way to remove the ink-bar

What is the use-case or motivation for changing an existing behavior?

Unless I misunderstand how this should work, this seems like a bug to me. I'd be happy to hear a workaround or understand how we are misusing the library if anyone has thoughts.

Which versions of AngularJS, Material, OS, and browsers are affected?

All Browsers
Angular 5.0.0
Material 5.0.1

[briananderson1222]

🎉 That was fast @crisbeto ! Thanks

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