Logo Questions Linux Laravel Mysql Ubuntu Git Menu

How to pass array of objects in angular app from one component to another component

I am working on angular app. I want to array of objects from one component to another using service. I am using the following link Pass array of int in Angular Route


 <button type="button" [routerLink]="['/receive-data']">Pass Data</button>


import ....
  selector: 'app-PassData',
  templateUrl: './PassData.component.html',
  styleUrls: ['./PassData.component.css'],
  providers: [DataService]

constructor( private dataService: DataService) { }
export class PassData {
  passObjects : any[] = [{'name': 'John', 'city': 'paris'},{'name': 'Bob', 'city': 'london'}, {'name': 'Grim', 'city': 'paris'}];

  passDataToService() {


  selector: 'app-ReceiveData',
  templateUrl: './ReceiveData.component.html',
  styleUrls: ['./ReceiveData.component.css'],
  providers: [DataService]

export class ReceiveData implements OnInit {
  let selectedProducts = this.DataService.retrievePassedObject();
  console.log(JSON.stringify(selectedProducts)); // prints empty array

This is angular service DataService.ts

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

export class DataService {

    allPassedData: any[] = [];
    constructor() {}
    storePassedObject(passedData) {
        this.allPassedData = passedData;

    retrievePassedObject() {
        return this.allPassedData;

Here there are two components, passedData and RecieveData and a service connecting them so data can be passed b/w them. My goal is to pass the data and print the passed data in ReceiveData Component. I am not sure how to structure the angular service when I retrieve the data I find it is empty.

I have registered in app.module.ts This is app.module.ts

import ...
 declarations: [
 providers : [

export class AppModule { }

I know allPassedData: any[] = []; is making the data empty when I try to access the objects from receiveData it is reassigned to []. But how do I solve this problem?

like image 678
karansys Avatar asked Jan 25 '23 04:01


1 Answers

Demo use BehaviorSubject

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
export class DataService {

  private paramSource = new BehaviorSubject(null);
  sharedParam = this.paramSource.asObservable();

  constructor() { }

  changeParam(param: any[]) {


import to components

constructor(private _dataService: DataService) { }

to change param

 this._dataService.changeParam("your parameter")

to read param

like image 176
mr. pc_coder Avatar answered Jan 30 '23 02:01

mr. pc_coder