"Implementing Basic Angular Routing & Nested Routing with Params"

How to Implement Basic Angular Routing and Nested Routing With Params?

Angular routing is an essential part of any web application. It allows users to navigate between different views, or pages, within the application. In this tutorial, we will learn how to set up simple routing and nested routing with parameters in an Angular application.

Step 1: Install the Routing Module

The first step is to install the @angular/router module from npm. To do this, open a terminal window and type npm install @angular/router --save. This will install the router module and save it as a dependency in your package.json file.

Step 2: Set Up a Base App Routing Module

Now that we have the router installed, we need to create a base app routing module that will define our routes. Create a new file named app-routing.module.ts in the src/app folder and add the following code:

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

const routes: Routes = [];

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

This code will define the basic routing module we need. Now, add the @NgModule() decorator, which will define a base app routing module that will be used throughout the application.

Step 3: Add Routes to the Routing Module

Now that we have our base app routing module created, we can start adding routes. Let's say we want to create a route that will point to a page called "About":

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

import { AboutComponent } from './about/about.component';

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

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

This code defines a route that will point to the about component. We can also use params for more complex routes, like this:

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

import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: 'about/:id', component: AboutComponent }
];

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

This code defines a route that will take a parameter called :id. We can now access this parameter in our about component like so:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    console.log(this.route.snapshot.params[‘id’]);
  }
}

We can also set up nested routing with params by adding them to the route path, like this:

const routes: Routes = [
  { path: 'about/:id/profile', component: ProfileComponent }
];

This route will take two parameters, an :id and a :profile. We can then access these parameters in the component like so:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    console.log(this.route.snapshot.params[‘id’]);
    console.log(this.route.snapshot.params[‘profile’]);
  }
}

And that's it! You now know how to implement basic Angular routing and nested routing with params in an Angular application.