Angular - 3 ways to pass data between two routes

Angular 14 (and older versions) provides several ways to pass data between two routes. Here are some of the common approaches: 

 

1. Query Parameters: You can pass data between two routes using query parameters. In the sending component, you can use the `Router` service to navigate to the receiving component and pass data in the query string. For example:

// Sending component
import { Router } from '@angular/router';

constructor(private router: Router) {}

onButtonClick() {
  let data = { id: 123, name: 'John' };
  this.router.navigate(['/receiving-component'], { queryParams: data });
}

In the receiving component, you can use the `ActivatedRoute` service to read the query parameters. For example:

// Receiving component
import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    console.log(params.id); // 123
    console.log(params.name); // 'John'
  });
}

2. Route Parameters: You can also pass data between two routes using route parameters. In the sending component, you can use the `Router` service to navigate to the receiving component and pass data in the route parameters. For example:

// Sending component
import { Router } from '@angular/router';

constructor(private router: Router) {}

onButtonClick() {
  let data = { id: 123, name: 'John' };
  this.router.navigate(['/receiving-component', data.id]);
}

In the receiving component, you can use the `ActivatedRoute` service to read the route parameters. For example:

// Receiving component
import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
  console.log(params.id); // 123
  });
}

3. Shared Service: You can also pass data between two routes using a shared service. In this approach, you create a service that can store data and inject it into both the sending and receiving components. For example:

// Shared service
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: any;

  setData(data: any) {
    this.data = data;
  }

  getData() {
    return this.data;
  }
}

In the sending component, you inject the shared service and call the `setData()` method to store data. For example:

// Sending component
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-sending',
  template: `<button(click)="onButtonClick()">Send Data</button>`
})

export class SendingComponent {

  constructor(private dataService: DataService) {}

  onButtonClick() {
    let data = { id: 123, name: 'John' };
    this.dataService.setData(data);
  }
}

In the receiving component, you inject the shared service and call the `getData()` method to retrieve data. For example:

// Receiving component
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-receiving',
  template: `
  {{ data?.id }}
  {{ data?.name }}`
})

export class ReceivingComponent {
  data: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.data = this.dataService.getData();
  }
}