Routing And Navigation In Angular - Part Eleven

So here we will see routing and navigation. And by the end of this article, you’ll have in depth understanding of how routing works in Angular. And you’ll be able to add navigation to your angular apps. More specifically we’ll learn about,

• Configuring Routes
• Implementing Single Page Application (SPA)
• Working with Routes and Query Parameters
• Programmatic Navigation

And if you’ve read my previous articles of Angular. Here is the roadmap for you to become a Ninja Developer of Angular.

• Introduction And Setting Up The Environment - Part One
• Typescript in a Nutshell - Part Two
• Building Blocks of Angular - Part Three
• Binding Variations And Displaying Data - Part Four
• Building Reusable Components – Part Five
• Directives – Part Six
• Template Driven Forms – Part Seven
• Reactive Forms – Part Eight
• CRUD Application with Fake HTTP Service – Part Nine
• Handling Errors in Angular – Part Ten

Routing In A Nutshell

So far we’ve seen a few of the built-in modules in Angular. We’ve used the Forms Module, Reactive Forms Module, Http Module. And now it is the time to explore another module which is the Router Module. So in this module, we’ve a bunch of directives and services that we use for implementing navigation in our application. We’re going to learn about this module in this article.

Now there are 3 steps to implement navigation.

• Configure the Routes
  Each route determines what component should be visible when the user navigates to a certain url. So route is the mapping of a path to a component.

• Add a router outlet
  That is where we display the corresponding component when a given route becomes active.

• Add Links
  So in this article we’ll explore each of these steps.

Configuring Routes

So we’ve covered 2 components with 2 different features in our last 3 articles. Now we’ll combine them and build the application with routing and implement navigation in the application. Here is the screenshot we’ll build in this article.

So let’s get started.

First of all as we already know that Navbar is a separate thing which we can reuse at multiple places. So let’s make a separate component for navbar.

• PS C:\Users\Ami Jan\HelloWorld\MyFirstAngularProject> ng g c navbar

Now we want navbar html. So we’ll use this navbar in our component html.

So in this navigation bar, we’ve 2 links (Followers, Posts). Now back in our app.module.ts.

Now create 3 more components and add the RouterModule import statement as well in app.module.ts

• PS C:\Users\Ami Jan\HelloWorld\MyFirstAngularProject> ng g c Home
• PS C:\Users\Ami Jan\HelloWorld\MyFirstAngularProject> ng g c GithubProfileComponent
• PS C:\Users\Ami Jan\HelloWorld\MyFirstAngularProject> ng g c NotFound

Now import this reference import statement as well.

And now we’re ready to our routes. So add module here as well (app.module.ts)

forRoot() is the static method defined in the RouterModule class. And we use this to define our root route in our application. As our application grows, we may want to break that application into smaller and more manageable modules. Then in each module, we’re going to have a set of routes for that particular area of the application. Then instead of using forRoot(), we’ll use forChild(). We’ll discuss it later on in detail. So in forRoot() here we pass an array of Routes, each route is an object with 2 properties (path, component).

With this we’re telling angular router that whenever the browser address changes to this path display this component. So now here we add the first route for our home page.

Note that here we don’t have ‘/’ leading slash in path. So none of our routes start with slash. And empty path ‘’ represents the homepage or the default route. Now let’s add more routes

To add the parameter, we use colon (:) and then we add the name of the parameter (username). And if the user navigates to the different url which is not the valid route, here we display the Notfound page. And for the path we use ‘**’ it can catch every url in the browser address bar.

Now the order of these routes is important. So if we put the last route at the beginning of the array, ** is the wildcard which is going to catch any route and we only gonna see NotFound page. So we need to place more specific routes on the top. If we change the path of our 3^rd route from profile to followers then the 2^nd route will always execute with GithubFollowersComponent.

So we need to place our more specific route first and then the general route.

Now it is more readable and more cleaner.

RouterOutlet

Now first of all let’s take a look in the browser.

So here is an issue. If you see our above code of RouterModule.forRoot() we’ve defined the home component on root path. And if you open your home.component.html

This is the html which is generated with Angular CLI. Now the issue is why our HomeComponent html is not rendering on the root path here. Where is the HomeComponent selector (app-home) in this browser inspect element?

The answer of all these questions is to implement the 2^nd step of routing to add router outlet and that’s where Angular router is going to display the component that is associated with current route. So let’s go back to the app.component.html. And add the router-outlet html element.

This is the directive that is defined in router module. When Angular sees this, it is going to render the component associated with the current route after this router-outlet. So it is not going to render it inside this element.

Look here we’ve app-home html element, this is our home component. We can see it’s not rendered inside router-outlet. It is rendered after this element.

Now let’s test our routes. And now our home component is visible. Now request the url (http://localhost:4200/followers) in the browser address bar, and it is working fine and showing the result.

And if we request the url (http://localhost:4200/posts)

So our routes are working properly. Now if we request the specific follower (http://localhost:4200/followers/1)

So our more specific route is working properly. Now if we change to invalid-url (http://localhost:4200/invalid)

Here we get the not-found page. So all our routes are working properly. Now let’s add the links in the navbar.

RouterLink

Now we’re ready to add links. So let’s go to navbar.component.html and here we’ve 2 links (followers, posts).

In both li we’ve separate href=”#” tags. Now the thing is in Angular application we don’t use href=”#” tags. Let me tell you the reason, why we don’t use href.

So change the href as,

Now open the browser and click on followers navbar menu button. You’ll notice that the browser page flickers (blinks) on a new request. So every time we click on the link, the entire page is downloaded and the Angular app is reinitialized that’s why the page blanks for just a split second. As your application grows or it has more codes, the cost of the startup is going to be higher so that delay might increase. Now if we look into the browser network tab.

All the resources of the browser are redownloaded every time when we click on the page, this is something that we want to avoid. Otherwise there is no point in Angular to build modern appliatin.

What Do We Want?

When we click on the link, we want only the content of the new page to be downloaded instead of the entire application with all the resources. So here we use the directive called routerLink and this directive is also defined in the RouterModule.

Now save the file and open the browser network tab.

Look here we’ve all the resources downloaded in the first time when we open the application. Now clear the network tab and click the navigation link on any navigation bar once again. And now we do not have the flickering effect and only the followers and post request is reloaded.

As you can see I’ve requested post navigation bar and then followers after refreshing my browser. In this list, you’ll not see any javascript file to be downloaded once again. All of these resources were downloaded only the first time. So we referred the applications build in this way Single Page Application (SPA). So essentially a single page application is downloaded from the web server and as the user navigates from one page to another, only the content of the target page is downloaded.

Now open the followers page and add the link to each follower. So here we’ve a link for each follower,

And here we’ll replace this href with routerLink. However, this time we’re dealing with dynamic url. When we’re dealing with route parameters, instead of using routerLink as an attribute we should use the property binding syntax. So,

And here instead of binding it with string, we should bind it with an expression. And in this expression we’ve an array, the first element in this array is the path and after this first element we add all the route parameters. And currently we’ve only 1 route parameter.

Now back in the browser and if we click the first follower, we go to the profile page. And note the url of the browser’s location bar.

So for recap once again, for simple routes we can use routerLink directive as an attribute and set it to the string value. And if we’re dealing with route parameter, we should use the property binding syntax and set the value of this property to an array. The first element in this array is the path and the subsequent element is the route argument.

RouterLinkActive

As we can see the followers link in the navigation bar is always highlighted. And if we navigate to somewhere else like posts, followers link is still active. Let’s see how can we fix this problem, in navbar.component.html here we’ve active class which is part of the bootstrap.

Now we want to apply this active class dynamically, so here we’ve another directive. And as the value of routerLinkActive, we set the string that includes a list of css classes that should be applied when this link is active. Here we’ve just one css class ‘active’ but we can add more. And these classes should be separated via space.

Now apply the same directive and test the application.

And look now it is working fine,

And here we’ve dynamically rendered the class active on navigation li.

Getting the Route Parameters

So in app.module.ts, we’ve defined this route that takes the parameter username.

Let’s see how we extract this parameter in our GithubProfileComponent because in the real world application, most likely we want to get this parameter and use the service to get the profile of the given user. So let’s go to the github-profile.component.ts, and in order to get access the route parameters we need to inject the ActivatedRoute class in our constructor. So,

This import statement is part of the RouterModule which we’ve imported in the start of the article. Now in ngOnInit() we get the route parameters from this object (route.paramMap) that’s the property that gives us all the parameters in this route.

Look, paramMap type is Observable<ParamMap> and we know that we use subscribe method to get the values emitted in this Observable

So let’s implement this intellisense.

Now let’s go back to the browser.

Look in the console, here we have 1 key username because in app.module we set the name of our parameter as username

Now this console object has another property called params and here we’ve keyvalue pairs for route parameter and their value. Here username contains some numbers, this is actually the user id. And this is the structure of paramMap object. Now back in ngOnInit(), let’s look at the members defined in this class.

So here we’ve get(), getAll(), has() functions and keys field. Here we saw the keys field which returns all the keys or all the route parameters. We use get() method to get the value of the given route parameter. We use getAll() to get the all route parameters. And has() to see if we’ve the parameter by the given name in this object. So here to get the value of username parameter, we call the get()

As we can see in the above browser image, params username contains actually user id. So always pay attention to name your route parameters because it can create confusion for other developers which will also increase the cost of maintenance of the application. So,

And now come back to the github-profile component.

The return type of get() method is string but if we want to convert the string into number, we’ll write as

And in most real world applications, we send this id to the service to get the profile of this user. But here we just log this on the console. And now test the application one more time.

So here we’ve user_id displayed on the console. So this is how we get route parameters. But you might be thinking why this paramMap is defined as Observable. To implement the Observable in the code is little bit hard for accessing the parameters. You might be thinking why we don’t have an api like this,

Or potentially we could have,

These techniques are easier to work with instead of Observable.

Why Are Route Parameters Observable?

To understand the answer to this question, we first need to know what happens to our components during navigation. So let’s say the user is navigating from 1^st page to another page. And on the first page, here we’ve a component A. They click on the link or a button to go to a different page where we display component B.

On navigation, Angular destroys the component A and remove it from the DOM and then it is going to create and initialize component B and render its template in the DOM.

Also to refresh your memory, we’ve component lifecycle hooks. So earlier we have discussed OnInit and OnDestroy Interfaces. So if you want to be notified when the component be initialized or destroy, we get implement these interfaces and add the corresponding methods in your component. So this is component lifecycle during navigation.

Now let’s take a look at a different scenario. Imagine we’ve a link or button on a component A that allows the user to navigate away from this page but also get to the same page.

Let’s take an example, Imagine we’re building a banking application where the user can see all the transactions and the details of each transaction. On the transaction detail page, we’ve 2 buttons, previous and next. When the user clicks on either of these buttons they go to the previous or next transaction and techniquelly they’re on the same page. So in this case, it doesn’t make sense for Angular to destroy this component only to recreate it straight away after. So in this particular usecase what we have is the same component instance but with different route parameters. So Angular will not destroy this component and it’s going to keep it in the DOM and this is the reason why route parameters are defined as Observable which brings to a different level of understanding about Observables.

An Observable is techniquelly a collection of asynchronous data that arrives over time. In the article of CRUD operation with fake http service, we simply subscribed to an Observable to get the response from the server and that particular case, we had only 1 item or 1 object in our observable that was the response from the server. But we can use observables to model streams of asynchronous data. So data comes into the stream and anyone who subscribes to this observable will be notified.

Now as the real world example, here in github-profile component we’re subscribing to this paramMap observable. So github-profile component is an observer of this observable, anytime there is new data in this collection github-profile component will be notified. As a metaphor, think of a mailing list. When you are subscribed to the mailing list of the blog. You’ll be notified via emails. We’ve the exact same concept here

So we’re subscribing to the paramMap which is the collection of route parameters that can change over time and everytime there is a new route parameter will be notified.

For better understanding, make our code simple

Now back in the browser and click on the first follower which brings us to github-profile page. During this navigation the old component which was the follower component was destroy and the new component which is the github-profile is initialized and placed in the DOM. So now if we look into the console, we’ve the OnInit console log text.

And if we go back to the followers page again, now the github-profile component is destroyed and is no longer in the DOM. And if we again go the 2^nd follower github profile, we’ll see 2 messages on the console.

So this shows that everytime we go away from this page, go to the followers list and come back ‘Github-profile component is reinitialized’.

Now let’s see when we give the user the ability to stay on the same component and navigate back and forward. So we’re not going to navigate away from the component. This component stays in the DOM but the route parameters are going to change. And here we should pay great attention. With this new implementation, we’re going to see only 1 OnInit message in the console because the component instance is not gonna be reinitialized. It stays in the DOM. So let’s take an example and open the github-profile.component.html and add the button here.