md-ink-bar not visible using <nav md-tab-nav-bar>

Bug, feature request, or proposal:

Bug

What is the expected behavior?

md-ink-bar should be visible

What is the current behavior?

md-ink-bar is not visible. The .mat-ink-bar class is not changed when clicking the tabs:

.mat-ink-bar {
    position: absolute;
    bottom: 0;
    height: 2px;
    transition: .5s cubic-bezier(.35,0,.25,1);
}

What are the steps to reproduce?

http://plnkr.co/edit/qXJdsDIr5pwXxCdbRyLL

The plunker includes a simple example, however I could not get the router to work correctly, because I am not familiar with plunker.

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

<nav md-tab-nav-bar> should yield the same presentation as <md-tab-group>

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

Tested on angular 2.3 and 2.4, material2 2.0.0-beta.2, Chrome v56

Is there anything else we should know?

nope

[willshowell]

@Pikachews The reason this doesn’t work for you (and using *ngFor does) is because of your redefining of #rla which has a template-wide scope. The following should work

<nav md-tab-nav-bar>
  <a md-tab-link routerLink="./foo" routerLinkActive #rlaFoo="routerLinkActive" [active]="rlaFoo.isActive">Foo</a>
  <a md-tab-link routerLink="./bar" routerLinkActive #rlaBar="routerLinkActive" [active]="rlaBar.isActive">Bar</a>
</nav>

[andrewseguin]

I’m seeing an issue where the ink bar does not show up with the correct width but it does show up. Will begin working on the issue I see, but I cannot reproduce your case.

Can you fork my plunker and try to reproduce with it? Note that you do not need to use the router, just manipulate the active input manually.

http://plnkr.co/edit/AGSBYVx4ucPVmXOd7abT?p=preview