Navtabs dynamic width

[mbeckenbach]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

When the innerHtml of a tab link changes, the underline should refresh its witdh.

What is the current behavior?

You have for example these nav tab links:
Tab 1 | Tab 2 | Tab 3

Now change the label of 'Tab 1' to 'Bananarama' which is much longer than 'Tab 1'.
The active underline will stay at the width of 'Tab 1'.

Edit: When removing the nav-tabs component from dom and re-add after a few milliseconds the underline will be correct. Looks like it's only calculated onInit

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

Dynamic tab labels

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

ng 4.1.x, md2 beta 5

[jotatoledo]

Would love to see this working

[andrewseguin]

Perhaps we could add a mutation observer to the component to check if any mutations occur that were not additions/removals.

@crisbeto What do you think about the best way is to use the mutation observer here?

[crisbeto]

Since we allow HTML in the tab, we don't have a choice, apart from the MutationObserver (we could've used ngOnChanged if the label was coming from an @Input). We can use the same approach that we have on the regular tabs.

[andrewseguin]

Seems good to me, except we'll be applying extra ink bar alignments since the ripple causes mutations as well (same in tabs). Would be nice to have a good way to filter those out as mutations

[crisbeto]

AFAIK the MutationObserver has some (not too granular) ways of filtering. We'd need to add those to the cdkObserveContent directive.

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