Angular 16 Routing Example Tutorial

Angular is a popular front-end web framework for building dynamic single-page applications (SPAs). One of the essential features of Angular is its routing mechanism, which allows you to navigate between different views or components without requiring a full page reload. Angular routing is accomplished through the Angular Router module, and it helps create a seamless and smooth user experience within your application.

In this tutorial, you will learn how to create a simple multi-page application with different routes using the Angular Router module with routing.

Angular 16 Routing Example Tutorial

Steps to implement routing using the Angular Router module. And build a simple multi-page application with different routes in angular applications:

• Step 1: Create a New Angular Project
• Step 2: Create Components
• Step 3: Define Routes
• Step 4: Update AppModule
• Step 5: Create Navigation Links
• Step 6: Serve the Application

Step 1: Create a New Angular Project

Open your terminal (or command prompt) and execute the following command to install and create a new Angular project:

ng new my-new-app

This will create a new Angular project with the name “angular-routing-example.” Enter the project directory:

cd angular-routing-example

Step 2: Create Components

In this step, we’ll create two components: HomeComponent and AboutComponent, which will be used for our routing example.

ng generate component home
ng generate component about

Step 3: Define Routes

Open the ‘app-routing.module.ts’ file in the ‘src/app’ directory. Here, we’ll define our routes for the HomeComponent and AboutComponent.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', redirectTo: '' } // Redirect to HomeComponent if the URL doesn't match any defined route
];

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

Step 4: Update AppModule

Open the ‘app.module.ts’ file in the ‘src/app’ directory and import the AppRoutingModule we just created.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module'; // Import the AppRoutingModule
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // Add the AppRoutingModule to the imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 5: Create Navigation Links

Open the ‘app.component.html’ file in the ‘src/app’ directory and add navigation links to navigate between the HomeComponent and AboutComponent.

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

<router-outlet></router-outlet>

Step 6: Serve the Application

Finally, execute the following command on cmd or terminal to serve your Angular application:

ng serve

Now, open your browser and go to http://localhost:4200. You should see your Angular app running with navigation links for the Home and About components. Clicking on these links will navigate you to the respective components.

Conclusion

That’s it! You have set up basic routing in your Angular application. Remember that this is a simple example, and Angular’s routing capabilities are vast, allowing for more complex configurations like nested routes, lazy loading, and route guards.

Recommended Angular Tutorials