angular: [routerLink] with async/observable property assignment does not re-evaluate [routerLinkActive] when the observable emits a new value.

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

[routerLink] with async/observable property assignment does not re-evaluate [routerLinkActive] when the observable emits a new value.

Expected behavior

When the value emitted to [routerLink] changes, [routerLinkActive] should re-evaluate against the newly emitted value whether or not the link is “active.”

Minimal reproduction of the problem with instructions

<a class=“waves-effect” [routerLink]=“observable$ | async” [routerLinkActive]=“[‘active’]” [routerLinkActiveOptions]=“{ exact: true }”>LINK

the application of the “active” class will not be re-evaluated when a new value is emitted by observable$. e.g. obervable$ = Observable.interval(1000).map(i => [‘/page/’ + i])

If you are on /page/0 link will be active on first emission, but will not go inactive once i > 1.

What is the motivation / use case for changing the behavior?

Using observables with routerLink should work.

Please tell us about your environment:

Chrome 55m, Windows 10

• Angular version: 2.0.X

2.4.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5] TypeScript 2.1.4.0

• Node (for AoT issues): node --version =