Stay Tuned!

Subscribe to our newsletter to get our newest articles instantly!


How to create a new route in Angular

In Angular applications, routing plays a pivotal role in navigating users across different views or components within a single-page application (SPA). Establishing new routes enables seamless transitions between various sections of the application. Let’s delve into the process of creating a new route in Angular to facilitate smooth navigation.

Setting Up Routes in Angular

1. Angular CLI Setup

Ensure you have an Angular project initialized using the Angular CLI:

ng new my-app
cd my-app

2. Create a New Component

Generate a new component using the Angular CLI:

ng generate component new-component

3. Configure Routes in AppModule

In the app.module.ts file, set up the routes using Angular’s RouterModule and Routes:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NewComponent } from './new-component/new-component.component';

const routes: Routes = [
  { path: 'new-route', component: NewComponent },
  // Define additional routes as needed

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

4. Adding Route Links

In the HTML template of your navigation bar or any relevant component, add links to navigate to the new route:

<a routerLink="/new-route">New Route</a>

5. Outlet for Displaying Routes

In the main application template (usually app.component.html), add a router outlet to display the routed components:


Navigating to the New Route

Once the routes are configured, navigating to the new route can be accomplished by clicking the link defined in the application.


Creating a new route in Angular involves defining the route path, associating it with a component, configuring routes in the AppModule, adding route links, and displaying routed components using the router outlet. This enables users to navigate seamlessly between different sections or views within the Angular application.

Mastering routing in Angular allows developers to create well-structured and navigable SPAs, providing users with a smooth and intuitive experience as they explore various sections of the application. Incorporate these steps to efficiently create and implement new routes, enhancing the navigation capabilities of your Angular projects.



About Author

Leave a comment

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

You may also like


How to format date in Angular 12

In Angular 12 applications, formatting dates is a common requirement for presenting dates in various formats within the user interface.
Angular CSS

How to add CSS class on click in Angular

In Angular applications, dynamically adding CSS classes on user interaction, such as a click event, offers a way to enhance