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?
What is the difference between [routerLink] and routerLink ? How should you use each one? They're the same directive. You use the first one to pass a dynamic value, and the second one to pass a static path as a string.
In Angular, RouterLink is a directive for navigating to a different route declaratively. Router. navigate and Router. navigateByURL are two methods available to the Router class to navigate imperatively in your component classes.
RouterLink for dynamic dataDynamic data or user-defined objects can be passed from Angular version 7.2 using the state object stored in History API. The state value can be provided using the routerLink directive or navigateByURL.
Routing lets you display specific views of your application depending on the URL path. To add this functionality to your sample application, you need to update the app.module.ts file to use the module, RouterModule . You import this module from @angular/router . From your code editor, open the app.module.ts file.
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'">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With