Angular

Angular Router App

updated on Leave a Comment on Angular Router App

📌 INTRODUCTION

Routing is one of the most important features in Angular. It allows users to move between different pages or views without reloading the entire application.

In a router-based Angular application, we can create multiple components such as:

  • Home page
  • About page
  • Contact page

and navigate between them using links.

In this program, we will create a simple Angular Router App that demonstrates navigation between multiple components.

📘 PROBLEM STATEMENT

👉 Create a router app using Angular.

💡 CONCEPTS USED

  • Angular Router
  • Components
  • Navigation links
  • <router-outlet>
  • Route configuration
  • Single Page Application

🧠 LOGIC EXPLANATION

The application works as follows:

  1. Create a new Angular project with routing enabled
  2. Create multiple components such as Home, About, and Contact
  3. Configure routes in the routing module
  4. Add navigation links
  5. Display routed components inside <router-outlet>

⚙️ STEP 1: CREATE ANGULAR PROJECT WITH ROUTING

Open terminal and run:

ng new router-app

During setup:

  • Would you like to add Angular routing? → Yes
  • Choose CSS

Move into the project folder:

cd router-app

Run the app:

ng serve

Open browser:

http://localhost:4200

⚙️ STEP 2: GENERATE COMPONENTS

Create three components:

ng g c home
ng g c about
ng g c contact

💻 PROGRAM CODE

Step 1: home.component.html

<h2>Home Page</h2>
<p>Welcome to the Home page of the Angular Router App.</p>

Step 2: about.component.html

<h2>About Page</h2>
<p>This page contains information about the application.</p>

Step 3: contact.component.html

<h2>Contact Page</h2>
<p>This page contains contact details.</p>

Step 4: Configure routes in app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Step 5: Update app.component.html

<h1 style="text-align:center;">Angular Router App</h1>

<nav style="text-align:center; margin-bottom:20px;">
  <a routerLink="/" style="margin:10px;">Home</a>
  <a routerLink="/about" style="margin:10px;">About</a>
  <a routerLink="/contact" style="margin:10px;">Contact</a>
</nav>

<hr>

<router-outlet></router-outlet>

🖥️ OUTPUT

When the app runs, you will see:

Angular Router App

Home   About   Contact
----------------------
Home Page
Welcome to the Home page of the Angular Router App.

When clicking About:

About Page
This page contains information about the application.

When clicking Contact:

Contact Page
This page contains contact details.

🔍 STEP-BY-STEP EXPLANATION

1. Create Components

Each page is created as a separate Angular component:

  • HomeComponent
  • AboutComponent
  • ContactComponent

2. Define Routes

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

This means:

  • / → Home page
  • /about → About page
  • /contact → Contact page

3. Use routerLink for Navigation

<a routerLink="/about">About</a>

This creates a navigation link to a route.

4. Use <router-outlet>

<router-outlet></router-outlet>

This is the placeholder where the routed component gets displayed.

🎯 IMPORTANT ROUTING CONCEPTS

TermMeaning
RoutePath linked to a component
RouterModuleAngular module used for routing
routerLinkDirective used for navigation
router-outletPlaceholder where routed content appears

⚡ ADVANCED VERSION: ADD ACTIVE LINK STYLE

Update navigation links:

<nav>
  <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
  <a routerLink="/about" routerLinkActive="active">About</a>
  <a routerLink="/contact" routerLinkActive="active">Contact</a>
</nav>

Add CSS in app.component.css:

a {
  text-decoration: none;
  margin: 10px;
  color: black;
}

.active {
  color: blue;
  font-weight: bold;
}

👉 This highlights the currently active route.

⚡ ADD 404 PAGE (OPTIONAL)

You can create a wildcard route for invalid URLs.

Generate component:

ng g c page-not-found

Update routes:

{ path: '**', component: PageNotFoundComponent }

This displays a custom page when the route does not exist.

🌟 WHY ROUTING IS IMPORTANT IN ANGULAR

Routing makes Angular applications:

  • Organized
  • Interactive
  • Easy to navigate
  • Similar to real websites

It is the backbone of Single Page Applications.

📚 REAL-WORLD USE CASE

Angular routing is used in:

  • E-commerce websites
  • Student portals
  • Admin dashboards
  • Banking applications
  • Learning management systems
  • Multi-page web applications

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is routing in Angular?

👉 Routing is the process of navigating between different components/pages in an Angular application.

Q2. What is routerLink?

👉 routerLink is a directive used to create navigation links in Angular.

Q3. What is <router-outlet>?

👉 It is a placeholder where the routed component is displayed.

Q4. What is the role of RouterModule.forRoot(routes)?

👉 It registers the routing configuration for the application.

Q5. What does path: '' mean?

👉 It represents the default route or home page.

Q6. Can Angular routing work without page reload?

👉 Yes, Angular routing works without reloading the full page.

Q7. What is a wildcard route?

👉 A wildcard route (**) handles invalid or unknown URLs.

Q8. Why is routing important in SPA?

👉 It allows users to move between views while keeping the application fast and dynamic.

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 Angular App using Components – Program 24
👉 Angular Hello World App – Program 23

📌 CONCLUSION

Routing is one of the most essential topics in Angular. It helps you build structured, user-friendly, and real-world applications.

👉 Practice creating routes for multiple pages and then move towards nested routes and parameterized routes for deeper understanding.

Further Reading

JUnit Tutorial

How to Master Full Stack Development?

Spring Framework Practice Problems and Their Solutions

30 MCQs on JUnit

From Google to the World: The Story of Go Programming Language

Why Go? Understanding the Advantages of this Emerging Language

Creating and Executing Simple Programs in Go

20+ Interview Questions on Go Programming Language

100+ MCQs On Java Architecture

Java Practice Exercise

programmingempire

Princites

You may also like...
Angular

Angular Hello World App
Angular

Creating Some Angular Components
Angular, MEAN Stack, MERN Stack

Which Front End Technology is Better: Angular or React?

Leave a Reply

Your email address will not be published. Required fields are marked *