Angular 12 Tutorial - Routing and Navigation

Navigation is one of the most critical user experiences in any online application that every developer should strive to improve. If a user is unable to browse your online application, they will consider it unfriendly and will not use it.

Angular 12 includes a plethora of navigation capabilities that can suit both sophisticated and basic scenarios. Routing is the complete process by which a web application specifies the navigation element and correlates to the view. This chapter will teach us more about navigation and routing.

How to configure Routing in Angular12

The Angular CLI can be used to configure routing. Let's have a look at how you may configure routing:

Step 1: Create a new router-enabled application

ng new routing-app --routing

After executing the preceding command, the CLI will automatically construct a new module for routing purposes. The resulting code in your application will look like this

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Using the metadata, the AppComponent will be able to import the AppRoutingModule.

Step 2 - You must now configure routing in the current application. Run the following command to accomplish this

ng generate module my-module --routing

This command will add routing-enabled features to the AppModule automatically.

Step 3 – Execute the following command to incorporate the additional parameters

Step 4: Set up the Expensemanager application. To install the ExpenseManager, use the following command to get to the root folder

cd /go/to/expense-manager

Then run the following command to construct the routing module

ng generate module app-routing --module app --flat

How to Create Routes

Creating routes is a simple operation; all you have to do is provide the target component to be called and the access path to the target component. The following lines of code are included in the code for setting the routing path

const routes: Routes = [
  { path: 'about', component: AboutComponent },
];

Accessing Routes

Accessing routes now entails using the routes that you have defined in your application. You can get to the routes by taking the two steps outlined below:

i. The router-outlet tag can be included in your root component template.

ii. The router link and the routerLinkActive property can be used.

Conclusion

We learned how to set up routing, create routing, and access routes built, allowing you to improve navigation features in your online application. We shall talk about angular Animations in the following chapter