Page 1 of 11

Angular - Routing

What is Routing?

In web development, routing is a technique for navigating between different views or pages in a an
application. It allows the application to determine which page to display based on the URL requested
by the user.

Routing in Angular

In Angular, routing is used to develop a single-page applications (SPAs). Although, an SPA does not
support multipage navigation, it allows navigation from one view (component) to another without
reloading the entire page. You can define the routes for different components to navigate when the
URL changes.

Below is the snippet of code of how routes are defined for different components:
 Page 2 of 11

routes = [
{path: 'home', component: HomeComponent},
{path: 'about', component: AboutComponent}
]

Here,

routes: An array contains all the routes for different components.

path: A path, which you can access on the URL to load the target component.

component: A target component will be loaded when the path is active on the URL.

When you create a new application, an [Link] file will automatically generated, where you
can define these routes for navigation.

The diagram below will give you a clear understanding of how routing works in Angular when the user
clicks on a link to navigate to a different component:

Types of routes in Angular

Static routes: These are the simple routes that map a specific URL path to a component.
 Page 3 of 11

{path: 'path-name', component: component-name}

Dynamic routes: A routes allow you to load different data or entities (such as products in an e-
commerce application or videos in a streaming platform) based on the values in the URL.
These routes are use parameters in the URL to dynamically load different entities of a components
based on current paramter pased in URL:

{path: 'path-name/:parameter', component: component-name}

Wildcard routes: These routes matches any URL path, which does not matched by other routes.

{path: '**', component: component-name}

Nested routes: A routes defined within other routes allow for hierarchical navigation structures.
Sometimes, we want a page (child route) to load only when its parent route is loaded first. For
example, in the route /settings/profile, the "settings" are the "parent route", and the "profile" is the
"child route". The profile page will only be accessible and displayed after the settings page has been
loaded:

{
path: 'parent-path', loadChildren:
[
{path: 'child-path1', component: component-name},
{path: 'child-path2', component: component-name}
]
}

-2% -17%

-12%

30% पर्यंत सूट मिळवा

Health​m ug​. com
 Page 4 of 11

Configure Routing in Angular

To configure a static (basic) routing in our Angular application, the Angular CLI (command line
interface) provides comprehensive support for setting up routing both during the application creation
process and while working on an existing application.

Let's create a new application with routing enabled using the command below:

ng new routing-app --routing

Even if you do not provide the --routing flag, the above command will generate a new file named
[Link] by default:

import { Routes } from '@angular/router';

export const routes: Routes = [];

Here,

Imports Routes from '@angular/router' package.

Routes provides functionality to configure and execute routing in the application.

Routes is the type used to setup the navigation rules.

Routes is the local variable (of type Routes) used to configure the actual navigation rules of
the application.

Defining Routes

To define routes in your Angular application that redirect to different components when the URL
changes, follow the steps below:

Step 1: Add your routes to your application

Open the [Link] file and place the below code:

import { Routes } from '@angular/router';

import { HomeComponent } from './home/[Link]';
import { AboutComponent } from './about/[Link]';

export const routes: Routes = [

{path: 'home', component: HomeComponent},
 Page 5 of 11

{path: 'about', component: AboutComponent}

];

Here,

home and about are paths that will be used in the URL to navigate to the "Home" and
"About" components.

HomeComponent and AboutComponent are the target component or destination.

When the URL changes "/home" and "/about", the matched component will be called and
rendered.

Adding routes in Configuration file

Make sure that the generated routes are added in the Configuration file ([Link]) otherwise, you
might get an error:

import { ApplicationConfig } from '@angular/core';

import { provideRouter } from '@angular/router';

import { routes } from './[Link]';

import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {

providers: [provideRouter(routes), provideClientHydration()]
};

Adding 'router-outlet' in root Component

To work with routing, you need to include the <router-outlet> directive in your root component
(recommended to add in [Link].), where you want to display the loaded components.

Including the "router-outlet" directive in [Link]:

<h1>Angular Routing</h1>
<router-outlet></router-outlet>

Testing the Routing

To test the routing, run the application and try to navigate to "/home" and "/about" by changing the
URL:
 Page 6 of 11

Using RouterLink for Navigation

Rather than changing the URL manually, you can use the RouterLink directive. The RouterLink directive
is used to set a path for navigating between views or components in an Angular application.

Binding a specified path in [Link] with an anchor element (<a>) to handle navigation when
links are clicked:

<h1>Angular Routing</h1>
<a routerLink="/home">Home</a><br>
<a routerLink="/about">About</a>
<router-outlet></router-outlet>

The output will look like:

 Page 7 of 11

Here,

routerLink set the route to be called using the path.

Note: Make sure that all the necessary modules and dependencies such as RouterOutlet, RouterLink,
and CommonModule should be added to your root component.

Multiple Choice Questions (MCQ's):

Here we have mentioned a few MCQs to test your knowledge on the current concept:

Q 1 − What is the purpose of Angular Router?

A − To manage server-side routing.

B − To manage client-side navigation.

C − To manage database connections.

D − To manage Angular services.

Answer : B
 Page 8 of 11

Explanation:
Angular Router is used to manage the client-side navigation. It enables developers to create
Single Page Applications (SPA).

Q 2 − Which decorator is used to define routes in Angular?

A − @Component

B − @NgModule

C − @Injectable

D − @RouteConfig

Answer : D

Explanation:
In Angular, the @RouteConfig decorator is used to define route configurations in Angular.

Q 3 − How can you pass parameters in Angular routes?

A − Using URL segments.

B − Using query strings.

C − Both A and B.

D − None of the above.

Answer : C

Explanation:
You can pass parameters in Angular routes using both URL segments and query strings. For
example, /user/:id for URL segments and /user?id=1 for query strings.
 Page 9 of 11

Q 4 − Which method is used to navigate between routes programmatically in Angular?

A − [Link]()

B − [Link]()

C − [Link]()

D − [Link]()

Answer : B

Explanation:
The [Link]() method is used to navigate between routes programmatically in
Angular.

Q 5 − Which method is used to navigate between routes programmatically in Angular?

A − To display the default component.

B − To switch between different templates.

C − To act as a placeholder for dynamically loaded components based on the current route.

D − To manage Angular services.

Answer : C

Explanation:
The RouterOutlet directive acts as a placeholder that marks where the router should display
the component for the active route.

TOP TUTORIALS

Python Tutorial
 Page 10 of 11

Java Tutorial

C++ Tutorial

C Programming Tutorial

C# Tutorial
PHP Tutorial

R Tutorial

HTML Tutorial

CSS Tutorial

JavaScript Tutorial

SQL Tutorial

TRENDING TECHNOLOGIES

Cloud Computing Tutorial

Amazon Web Services Tutorial

Microsoft Azure Tutorial

Git Tutorial
Ethical Hacking Tutorial

Docker Tutorial

Kubernetes Tutorial

DSA Tutorial

Spring Boot Tutorial

SDLC Tutorial
Unix Tutorial

CERTIFICATIONS

Business Analytics Certification

Java & Spring Boot Advanced Certification

Data Science Advanced Certification

Cloud Computing And DevOps

Advanced Certification In Business Analytics

Artificial Intelligence And Machine Learning

DevOps Certification

Game Development Certification

Front-End Developer Certification

AWS Certification Training

Python Programming Certification

 Page 11 of 11

COMPILERS & EDITORS

Online Java Compiler

Online Python Compiler

Online Go Compiler
Online C Compiler

Online C++ Compiler

Online C# Compiler

Online PHP Compiler

Online MATLAB Compiler

Online Bash Terminal

Online SQL Compiler

Online Html Editor

ABOUT US | OUR TEAM | CAREERS | JOBS | CONTACT US | TERMS OF USE |

PRIVACY POLICY | REFUND POLICY | COOKIES POLICY | FAQ'S

Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical
and non-technical subjects.

© Copyright 2025. All Rights Reserved.