The Angular 10/9 RouterLink, Navigate and NavigateByUrl

The Angular 10/9 RouterLink, Navigate and NavigateByUrl

In this post we will give you information about The Angular 10/9 RouterLink, Navigate and NavigateByUrl. Hear we will give you detail about The Angular 10/9 RouterLink, Navigate and NavigateByUrlAnd how to use it also give you demo for it if it is necessary.

In the previous tutorial of the Angular 10 Router, we’ve seen how to use basic routing between components then how to handle route parameters using different methods. We’ve also seen how to use the RouterLink directive to create route links. This tutorial continues from the previous tutorials with other methods to implement navigation.

RouterLink Example with Angular 10

Let’s give a second look at how we used the RouterLink directive in the previous tutorial(s).

We created basic links using:

<arouterLink="/">Go To Home</a>

Or also:

<a[routerLink]="'/'">Go To Home</a>

We then created a link with a parameter using:


Navigating Programatically Using Angular 10 Router.navigate() and Router.navigateByUrl()

The Angular 10 Router provides two methods that you can use to navigate to other components in your component class instead of using the RouterLink directive in the template. The two methods are navigate() and navigateByUrl() and they can be useful in multiple situations where you need to trigger navigation via code. They return a promise that resolves to true or false.

navigateByUrl() takes a string as a parameter. navigate() takes an array of URL segments.

So let’s modify our previous Angular application to navigate using one of these methods. Go ahead and open src/app/product-list/product-list.component.ts then first import and inject the Router class:

import{Component}from"@angular/core";import{Product}from"../models/product";import{Router}from"@angular/router";@Component({selector:"product-list",templateUrl:"product-list.component.html"})exportclassProductListComponent{publicproducts:Product[]=[newProduct(1,"Product 001"),newProduct(2,"Product 002"),newProduct(3,"Product 003"),newProduct(4,"Product 004"),newProduct(5,"Product 005"),newProduct(6,"Product 006"),newProduct(7,"Product 007"),newProduct(8,"Product 008")];constructor(privaterouter:Router){}}

Next add the gotoProductDetails() method which takes an url and id parameters which they are passed as an array of segments to the navigate() method:

publicgotoProductDetails(url,id){this.router.navigate([url,id]).then((e)=>{if(e){console.log("Navigation is successful!");}else{console.log("Navigation has failed!");}});}

You can also build a string from these parameters and use navigateByUrl():

publicgotoProductDetailsV2(url,id){varmyurl='${url}/${id}';this.router.navigateByUrl(myurl).then(e=>{if(e){console.log("Navigation is successful!");}else{console.log("Navigation has failed!");}});}

Next open the component template in src/app/product-list/product-list.html then add a button and bind its click action to one of the previous methods:


This is the whole template:

<h1>Products List</h1><ul><li*ngFor="let product of products"><a[routerLink]="['/product/',]"></a><button(click)="gotoProductDetails('/product',">Go To Details</button></li></ul><arouterLink="/">Go To Home</a>


In this tutorial, we’ve seen different methods to implement navigation with the Angular 10 Router i.e using the routerLink directive with the anchor tags in components HTML template or using Router.navigate() and Router.navigateByUrl() methods in situations where you want to navigate in the component class. You can find the complete code for the Angular Router tutorials in this repository.

Hope this code and post will helped you for implement The Angular 10/9 RouterLink, Navigate and NavigateByUrl. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US