Understand Angular 7 ActivatedRoute Route and Its Usage

Article By Rawat Digamber on

Angular 7 ActivatedRoute

Understand Angular 7 ActivatedRoute Interface Class

Angular 7 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

@Injectable({
  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.

@Component({
  selector: 'demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})

export class DemoComponent implements OnInit {
  
  constructor(
    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 
    })
  }

}

Feel free to contact me, If you are looking for a freelance web and mobile app developer in India, with the following skills: Angular JS, Angular 2+, Node JS, Firebase, MongoDB, Ionic Framework and WordPress.

I also offer remote contracting services to clients across the globe.

Get Started