Angular Basics: Beginner Guide to Angular Router

The navigation that the application does to serve you a different view is called routing. Let’s get a solid understanding of routing in Angular.

Today we will be looking at one of the many interesting features of any frontend framework—routing—and how it is done in Angular.

Before We Start

This post is suited for all levels of frontend developers who use Angular, so being conversant with beginner concepts and installation processes is not assumed. Here are a few prerequisites you should have to be able to follow through this article’s demonstration:

• An integrated development environment like VS Code
• Node version 11.0 installed on your machine
• Node Package Manager version 6.7 (it usually ships with Node installation)
• Angular CLI version 8.0 or above
• A recent version of Angular (this demo uses Angular 12)

Other nice-to-haves include:

• Working knowledge of the Angular framework at a beginner level

What Is Routing?

When building a single-page application (SPA) using Angular, you need to be able to ensure you take care of navigation and you can serve different views to your users as needed.

A great illustration is when you open any business website today, you will see the homepage, the Contact page, the About page and so on. If you proceed to click on the About page, you still see all the elements in the navigation, but the rest of the view changes to the About page. This same thing happens when you click the Contact page or any other page.

The navigation that the application does to serve you a different view is called routing.

Routing in Angular

Angular has a library package called the Angular Router (@angular/router) that takes care of routing in your Angular projects. If you set up the router and define routes, you can input a URL and Angular will navigate you to the corresponding view. You can click on a link or button and also get navigated, or you can also use the browser back and forward buttons to trigger router use.

What We Are Building

Today we are building a simple navigation component to illustrate the concept of routing in Angular. We will be building this manually instead of using the Angular CLI so you can understand what goes into the work that the CLI does when you use it.

Setting Up

Create a new folder in the location of choice on your machine and open it with VS Code. Open the terminal and run the command below:

ng new router

When the Angular CLI prompt asks if you want to add routing, choose No and complete the setup for your project. Now let us install bootstrap so we do not have to style the Navbar component ourselves.

npm install bootstrap

After this, open your angular.json file and make sure the styles is defined like this:

“styles”: [
“node_modules/bootstrap/dist/css/bootstrap.min.css”,
“src/styles.css”
]

Creating Components

Now we want to generate the about and the contact components.

ng generate component about
ng generate component contact

You can see now files have been created and the app module file being updated. Inside the app component.html file, replace the content with the code block below:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="/">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/about">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/contact">Contact</a>
  </li>
</ul>

This is a HTML list with three list items: Home, About and Contact. This is what we want to connect to the Angular Router so that we can serve different views for every new page we navigate to.

Displaying the Content

To display content from a child component, you have to tell Angular where exactly in the template you want the display to be. In the app component.html file, add these new lines:

<div class="container">
<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="/">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/about">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/contact">Contact</a>
  </li>
</ul>
<app-about></app-about>
<app-contact></app-contact>
</div>

Now when you save your work, run the dev server and open the browser to localhost:4200. You should see this:

Setting Up the Router

The routes are always defined in the app module. Open the app module file and replace the content with the code block below:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
const routes: Routes = [
  {path:'about', component: AboutComponent},
  {path:'contact', component: ContactComponent}
];
@NgModule({
  declarations: [
    AppComponent,
    AboutComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here we made three changes: first we imported the router module from Angular, then we created the routes in an array, and finally we declared it by adding it to the imports below.

This is how to set up routes in Angular. You can define navigations and all the views exactly how you want it here.

Using Router Outlet

If you save your project at this stage, you will see that nothing has really changed in the views you serve. This because we still have app-about and app-contact displaying content from their parent component.

To change that, Angular provides the Router Outlet for use in the template. It basically tells Angular to check the routes defined and serve views just according to those definitions.

<div class="container">
<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="/">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/about">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/contact">Contact</a>
  </li>
</ul>
<router-outlet></router-outlet>
</div>

If you save the project, you will see that everything works as you would expect it to work.

Conclusion

This has been a quick introduction to routing in Angular. We have learned how important navigation is and how Angular handles it with routing. We saw how to set up routing from one component to another easily using the router module. Happy hacking!