Angular 12 ActivatedRoute Route Tutorial with Example

Last updated on: by Digamber
In this tutorial you will learn about Angular 12 ActivatedRoute interface class with example, Angular offers ActivatedRoute interface class.

It carries the information about a route linked to a component loaded into the Angular app template. An ActivatedRoute contains the router state tree within the angular app’s memory.

Understand ActivatedRoute Interface Class Properties

  • Snapshot – This is the current snapshot of this route.
  • URL – It is an observable of the URL segments and it matched by this route
  • Params – Observable of the matrix parameters scoped to this route
  • QueryParams – Observable of the query parameters shared by all the routes
  • Fragment – Observable of the URL fragment shared by all the routes
  • Data – Observable of the static and resolved data of this route.
  • Root – This is the root of the router state
  • Parent – This property is the parent of this route in the router state tree
  • FirstChild – First child of this route in the router state tree
  • Children – Children of this route in the router state tree
  • pathFromRoot – Path from the root of the router state tree to this route
  • paramMap – It is read-only
  • queryParamMap – It is read-only
  • Outlet – It’s a constant and outlet name of the route
  • Component – It’s a constant and a component of the route
  • RouteConfig – This configuration used to match this route
Run the following command to generate student interface class for setting up data types.

ng g i student

Afterwards, go to student.ts file and add the following code into it.

export interface Student {
   $key: string;
   firstName: string;
   lastName: string;
   email: string
   mobileNumber: Number;

Generate crud.service.ts

This file hold the GetStudent() method which will get student from database.

import { Injectable } from '@angular/core';
import { Student } from '../shared/student';  // Student data type interface class
import { AngularFireDatabase, AngularFireObject } from '@angular/fire/database';  // Firebase modules for Database, Data list and Single object

  providedIn: 'root'

export class CrudService {
  studentRef: AngularFireObject<any>;   // Reference to Student object, its an Observable too
  // Inject AngularFireDatabase Dependency in Constructor
  constructor(private db: AngularFireDatabase) { }

  // Fetch Single Student Object
  GetStudent(id: string) {
    this.studentRef = this.db.object('students-list/' + id);
    return this.studentRef;

Use ActivatedRoute Service to Get Current Id

import { CrudService } from '../shared/crud.service';
import { ActivatedRoute } from "@angular/router"; // ActivatedRoue is used to get the current associated components information.

  selector: 'demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']

export class DemoComponent implements OnInit {
    private crudApi: CrudService,       // Inject CRUD API in constructor
    private actRoute: ActivatedRoute   // Activated route to get the current component's inforamation
  ){ }

  ngOnInit() {
    const id = this.actRoute.snapshot.paramMap.get('id');  // Getting current component's id or information using ActivatedRoute service
    this.crudApi.GetStudent(id).valueChanges().subscribe(data => {
      this.editForm.setValue(data)  // Using SetValue() method, It's a ReactiveForm's API to store intial value of reactive form 



I am Digamber, a full-stack developer and fitness enthusiast. I crafted this site to bestow my coding experience and love to write on JavaScript, React, Angular, Vue, Laravel.