When would you surround routerLink in square brackets?

Issue

The Angular 2 cheat sheet shows examples of routerLink both with and without square brackets in templates:

<a routerLink="/path">
<a [routerLink]="[ '/path', routeParam ]">
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
<a [routerLink]="[ '/path' ]" fragment="anchor">

What's the difference in functionality?

Solution

When you put square brackets around routerLink (or any Angular binding) it will evaluate what you pass to it as a JavaScript expression. If you don't put square brackets around routerLink it will take what you pass it as a literal string.

So if you want to pass an array to routerLink or evaluate a variable then you would have to use square brackets. If you want to pass a string you could either do

<a routerLink="/path">

OR

<a [routerLink]="'/path'">

Answered By - rob