What is the difference between the navigate function and routerLink in Angular 2?

Question

I'm following the official Angular 2 tutorial and it uses the navigate function in a very similar way as the routerLink. What is the difference between them? Which to use when?

this.router.navigate(['/detail', this.selectedHero.id]);

---

[routerLink]="['/detail', hero.id]"

Answer 1

[routerLink] is an Angular directive that you can use in html for <a> or <button> elements. The directive will listen for click events and navigate to the path created with params provided to routerLink.

this.router.navigate(['/detail', this.selectedHero.id]); is used in your component or service to navigate.

routerLink directive and this.router.navigate should navigate to exactly the same url if the same arguments are specified.