Angular Routing with example

What is Routing in Angular?

Angular Router provides a way to navigate one part to another part in Single Page Application (SPA).

How to create Routing in Angular?

Here we used Angular 14 for this project.

At the time of creation of project it will ask to include angular route press Y to add routing.

It will add angular routing to the angular project.

Creating Components for Routing

We will create following components for Routing

  1. HomeComponent
  2. AboutUsComponent
  3. ContactUsComponent
  4. PricingComponent
  5. ProductsComponent
  6. TestimonialComponents

To generate the above components we used the following commands

Adding Routing Module

Open file app.module.ts and import AppRoutingModule.

Now your import statement will look like

This requires to import following Module as below

import { AppRoutingModule } from './app-routing.module';

Add routs to app-routing.module.ts

To create routs route array take objects of routs which have fields like path and component as below.

Add all components to route array.

/home opens HomeComponent
/aboutus opens AboutusComponent
/countactus opens ContactusComponent

and similar for others.

In the last two path, one is ‘ ‘ (empty) and redirectTo is configured. It means if we do not provide any path it will redirect to /home.

So at the start when it will load localhost:4200 it will redirect to localhost:4200/home.

To configure the wildcard route here ** is used.

If any route is not configured then the default route works.

Here we specified HomeComponent as a wildcard.

create a constant routing component and add all components there.

Run and Access Routing

To run a project use ng serve command

it will open localhost:4200 and redirect to localhost:4200/home and shows the contents of HomeController.

Similar wat open localhost:4200/aboutus, locahost:4200/contactus etc.

It will show the default content of the respective controller.

index.html

  <base href=”/”> must be present at index.html

also to improve look and feel add bootstrap5.

Adding Menu at app.component.html

Bootstrap5 navbar is used to create menu

<router-outlet></router-outlet> is required for angular routing.

Run and Check again

Fig: Angular Routing

Test all links.

All are working properly.

Adding Content to Components

1 home.component.html

2 aboutus.component.html

3 contactus.component.html

4 pricing.component.html

5 products.component.html

6 testimonial.component.html

Run again the project.

You will see following output.

Output

Home Page

Angular Routing Home page
Fig: Home page

About Us Page

Angular Routing About Us
Fig: About us

Contact us Page

Angular Routing Contactus page
Fig: Contact us

Products Page

Angular Routing Product page
Fig: products

Pricing Page

Angular Routing Pricing page
Fig: Pricing

Testimonial Page

Angular Routing Testimonial page
Fig Testimonial

Read More

How to create First Angular App (Step by step )

Angular Spring Boot showing data in table

Reference

Common Routing Tasks