1

I'm currently working with angular2 and material2. My goal is to change the md-button to md-raised-button when my routerLinkActive is active. For example, if I am on "/todos", I want the "md-button" directive to be replaced by "md-raised-button".

I can't find any solution over the internet, I hope someone can guide me. I would love to avoid using a CSS class.

<a md-button routerLink="/" routerLinkActive="toolbar-active" [routerLinkActiveOptions]="{exact: true}">
  Home
</a>
<a md-button routerLink="/todos" routerLinkActive="toolbar-active" [routerLinkActiveOptions]="{exact: true}">
  Todos
</a>

Thanks for your help!

Mathieu

MT.
  • 25
  • 5

1 Answers1

1

I don't think there is an easier way.

<a md-button #rlActive="routerLinkActive" [hidden]="!rlActive.active" routerLink="/" routerLinkActive="toolbar-active" [routerLinkActiveOptions]="{exact: true}">
  Home
</a>
<a md-button-raised #rlActive="routerLinkActive" [hidden]="rlActive.active" routerLink="/" routerLinkActive="toolbar-active" [routerLinkActiveOptions]="{exact: true}">
  Home
</a>

<a md-button #rlActive="routerLinkActive" [hidden]="!rlActive.active" routerLink="/todos" routerLinkActive="toolbar-active" [routerLinkActiveOptions]="{exact: true}">
  Todos
</a>
<a md-button-raised #rlActive="routerLinkActive" [hidden]="rlActive.active" routerLink="/todos" routerLinkActive="toolbar-active" [routerLinkActiveOptions]="{exact: true}">
  Todos
</a>

If you need this often, I'd wrap the button into a custom component to make it easier to reuse this pattern.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thanks. It doubles the number of line of codes but at least it's a simple solution! Awesome ;) – MT. Apr 12 '17 at 21:45