Routing And WildCard Route In Angular

In this article, we will learn about Routing and Wild Card Routes in Angular v6. We will learn from the beginning, i.e., how we set up Angular 6 environment in VS Code.

In this article, we will learn about routing and wildcard routes in Angular 6. We will learn from the beginning; i.e., how to set up an Angular 6 environment in VS Code.

Introduction

Routing is a mechanism to redirect the users from one page to another page. Angular Routing provides the navigation from one page to another page on which you want the user to redirect.

Prerequisites

  • We should have a basic knowledge of HTML and JavaScript.
  • Basic knowledge of TypeScript
  • Visual Studio Code be installed
  • Node and NPM installed
Integrated Development Environment

First of all, let's install NodeJS. Open this link for installing Node.js.

https://nodejs.org/en/download/

Routing and WildCard Route In Angular 6
 
Download the latest version of Node.js according to the Windows version (64-bit or 32-bit) on your machine. To check the configuration of your machine, right-click on "My Computer", select Properties, and check the system type. 

After downloading Node.js, intsall it and check the node and npm versions. To check the version, open command prompt, and type -

node -v

npm -v

 Routing and WildCard Route In Angular 6
     
After this, let us install Angular CLI. or installing Angular CLI, type the following command. 

npm install -g @angular/cli

Routing and WildCard Route In Angular 6 

After installing CLI, create a new project including the routing using -

ng new Demoproject --routing

Open VS Code and open the Demoproject.
 
Routing and WildCard Route In Angular 6 
Routing and WildCard Route In Angular 6
 
Now, open the integrated terminal by pressing Ctrl + and ~.

Let's add three components to your project with the names Home, About, and Contact.

  • ng g c Home -it -is
  • ng g c About -it -is
  • ng g c Contact -it -is 
  • g for generate
  • c for component
  • -it for inline template
  • -is for inline style
Routing and WildCard Route In Angular 6

Now, check in the project if the component is created.

Routing and WildCard Route In Angular 6 

Now, let us configure the routes. For the configuration of the route, let us open App-routing.modules.ts and make the following changes in it.

  1. const routes: Routes = [  
  2.    {path:'Home',component:HomeComponent},  
  3.    {path:'About',component:AboutComponent},  
  4.    {path:'contact',component:ContactComponent}  
  5. ]; 
Routing and WildCard Route In Angular 6 

Routing and WildCard Route In Angular 6
 
Now, open App.component.html and add these lines of code.
  1. <nav>  
  2.    <a class="button" routerLink="/Home">Home</a>  
  3.    <a class="button" routerLink="/About">About</a>  
  4.    <a class="button" routerLink="/contact">Contact</a><br>  
  5. </nav> 
Routing and WildCard Route In Angular 6

Now, add some style for the button in style.cs. Now open the integrated terminal and type

ng serve -o

This will run the project and you will get to see the browser window.
 
Routing and WildCard Route In Angular 6 

Check the result.
Routing and WildCard Route In Angular 6
Wildcard Route

When we try to redirect a page which is not available, then we can redirect it to an Error page. Using the wildcard route, we can redirect to an error page if a particular page is not found.

We can use the Wildcard using "**"

In pat, Set path :"**" and set the component or view where we want to redirect in the case of the page not found condition.