[Part 3] Angular Routing

Hello! In this article, we are going to see step by step angular routing process. We mainly focus on how we navigate through different components in the project.

When we are creating a website or web application routing is the key of navigating throughout the application. Routing is used after user clicks on links or buttons to change the view from one to another.

Step 1 : Add Components in the Project

You can create a component with the help of angular command shown below.

ng generate component component_name

You can also create components manually by creating a new folder and adding required files in it.

I have added three components in my project like Customer, Employee and Home which are you can see in following image.

Now we have successfully added the components in our project.

Step 2 : Import the RouterModule

Here we import RouterModule in root module file because it contains all the routing related features provided by angular such as routerLink, routerLinkActive, router-outlet etc.

We have to import this from ‘@angular/router’ directory into the root module of application i.e. HomeModule.

In line no. 6, the RouterModule is imported from its respective directory.

Step 3 : Routes Configuration

The next part is you have to create the routes for navigation. Usually Routes tells the Router which view has to be loaded when user clicks on a link or paste the URL in address bar. Also Routes are objects enclosed in an array.

The Routes we are creating has to be a constant.

Here we mentioned which component to be loaded if there path URL is appeared in the address bar. If the path is having no value or left blank that means the components mentioned in that path will be displayed when the default URL is loaded without any suffix value of any path.

Therefore in our project, whenever localhost:4200 is loaded, every time it will navigate to the Home page.

Step 4 : Adding Routes to RouterModule.forRoot()

The next step after we created the Routes is let the angular Router know about these Routes. Fir that we have to use ‘forRoot’ from RouterModule.

For that we pass the Routes to the forRoot fuction like RouterModule.forRoot(Routes) as shown below at line no 20:

Step 5 : Adding router-outlet for viewing components

After generating Routes and passing Routes to the initial navigation using URL, next step is to display the view components. We use <router-outlet> directive for that as it specifies where we want to display the routed component view template.

To display the components from the project we created a shell page that acts as a blank slate to load a component on that page whenever user clicks on navigation links.

For that we created a page MasterPage and mentioned only <router-outlet> in the UI section. All the views of components are loaded in this <router-outlet> area from MasterPage whenever routing occurs.

Step 5 : Using routerLink directive

Here, routerLink directive is used for navigating by links created using anchor tags. It tells the angular Router that where to navigate when the respective anchor tag elements are clicked.

In the UI we created, we have used routerLink in anchor tags for navigating to respective view mentioned there. Following are the UI components where we used routerLink:

Output :

1. When we open the default URL i.e. localhost:4200 then we can see the home page as earlier we set this as a first page to be loaded.

2. When we click on Customer link on the Home Page, this page is opened as mentioned in the path. And by clicking on ‘Go To Home’ brings us back to Home Page.

3. Similarly, this page also works same like Customer as per mentioned in the path for this page.

Thank You..!