Routing In Angular V4 And Above

Hi Readers, I hope you all are doing well. Please read my previous article, Angular Services For Sharing Data Between Components, in which I have explained the method by which we can share the required data between components using Angular services which is very important for Angular. Today, I am here with one more article, which is Angular Routing.

Now, two things which you should keep in your mind - What is Routing and why we are using it in Angular. I have already explained about routing in my previous article, and here, I am going to explain in more detail.

What is Routing?

You can say simply: Angular provides a Router to make it easier to define routes for the web applications and to navigate from one view to another. The basic concepts behind routing are when a user needs to view any page based on specific URL, Angular provides a routing feature by which the view will be rendered of the specific component according to defined routing.

Why Routing

We are using routing to navigate from one view to another. It's a basic need of all the web applications to move one page to another and show the required data within the view without loading full page. So, in this case, routing comes into the picture. With the help of routing, we can simply move multiple pages with any specified URL which one we need.

There are few steps which we have to do for Angular Routing. First, we will create the required component which is necessary to start the application. For component creation, you can use either command ng g component <componentname> or by the application which I had already explained in my previous tutorial so we will create 2 component as Home and Contact with HTML file for the initial step of routing as,

Step1

app.home.component.html

app.contact.component.ts

app.contact.component.html

Step 2

Now, we will create the routing file as,

app.routing.ts

As you can see above we have added routing file with required routing according to our component. Here, you need to know a few things about routing which we have added above:

Routes

We can import the Routes from @angular.router that we are using in our application with a component that describes the routes we want to use. As you can see in above within the Routes we have defined the path which match the URL and component which will get the HTML page of the component.

ModuleWithProvider

As you can see above, we can import the ModuleWithProvider from @angular/core which we are using with RouterModule which we can import from @angular.router. RouterModule has the method forRoot in which we can pass the Routes which we have created for routing.

Step 3

Now, we will create the navigation menu by which we can use the routing. In the navigation menu, we will add the component where we have added <router-outlet></router-outlet> as in the main component.

app.component.ts

app.component.html

As you can see above, we have added [routerLink] and <router-outlet></router-outlet> with the app.component.html file which is our main component file. Here, we are using [routeLink] with anchor for moving from one view to another view according to a specified route which we have added in app.routing.ts and <router-outlet></router-outlet> for rendering the view according to the component file.

Step 4

Now, we have to register each component and routing in the app.module.ts file as below,

app.module.ts

As you can see above we have added the component in the declaration section and routing in imports section where we are using all the modules which is required for our application.

If you want to use some styles for the menu, you can use css within style.css which is global style sheet: