What is the difference between [routerLink]
and routerLink
? How should you use each one?
You'll see this in all the directives:
When you use brackets, it means you're passing a bindable property (a variable).
<a [routerLink]="routerLinkVariable"></a>
So this variable (routerLinkVariable) could be defined inside your class and it should have a value like below:
export class myComponent {
public routerLinkVariable = "/home"; // the value of the variable is string!
But with variables, you have the opportunity to make it dynamic right?
export class myComponent {
public routerLinkVariable = "/home"; // the value of the variable is string!
updateRouterLinkVariable(){
this.routerLinkVariable = '/about';
}
Where as without brackets you're passing string only and you can't change it, it's hard coded and it'll be like that throughout your app.
<a routerLink="/home"></a>
UPDATE :
The other speciality about using brackets specifically for routerLink is that you can pass dynamic query parameters to the link you're navigating to:
So adding a new variable
export class myComponent {
private dynamicQueryParameter = '129';
public routerLinkVariable = "/home";
Updating the [routerLink]
<a [routerLink]="[routerLinkVariable]"[queryParams]="{unit: dynamicQueryParameter}"></a>
When you want to click on this link, it would become:
<a href="/home?unit=129"></a>