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

Question

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

PassData.html

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

PassData.ts

import ....
@Component({
  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() {
     this.dataService.storePassedObject(this.passObjects);
  }
    
}

ReceiveData.ts

@Component({
  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';

@Injectable()
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 ...
@NgModule({
 declarations: [
  PassData,
  ReceieveData
 ],
 providers : [
DataService
 ]
})

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?

Hi Sunny Goel , I am new to angular , can you describe me how to do that — karansys
– karansys, Commented Jul 17, 2020 at 19:48
refer the below my answer for code structuring and solving the problem. — Sunny Goel
– Sunny Goel, Commented Jul 17, 2020 at 20:02

Cagri Tacyildiz · Accepted Answer · 2020-07-17 19:57:17Z

6

Demo use BehaviorSubject

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

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

  constructor() { }

  changeParam(param: any[]) {
    this.paramSource.next(param)
  }

}

import to components

constructor(private _dataService: DataService) { }

to change param

 this._dataService.changeParam("your parameter")

to read param

this._dataService.sharedParam.subscribe(param=>console.log(param))

edited Jul 17, 2020 at 19:57

answered Jul 17, 2020 at 19:50

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

marc_s · Accepted Answer · 2021-01-10 09:35:16Z

Use the Subjects and Behaviour Subjects in Service. like below example. so in that case both the component can subscribe the service object and emit the data as well. so whenever one changes other will get that data.

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

@Injectable()
export class DataService {

allPassedData: BehaviourSubject<any> = new BehaviourSubject<any>([]);
constructor() {}

storePassedObject(passedData) {
    this.allPassedData.next(passedData);
   
}
// here instead of retrieve like this you can directly subscribe the property in your components
retrievePassedObject() {
    return this.allPassedData;
    
}
}

// Passed Component
 import ....
 @Component({
   selector: 'app-PassData',
   templateUrl: './PassData.component.html',
   styleUrls: ['./PassData.component.css'],
   providers: [DataService] // inject in module for singleton instance
 })

 export class PassData {

 passObjects : any[] = [{'name': 'John', 'city': 'paris'},{'name': 'Bob', 
 'city': 'london'}, {'name': 'Grim', 'city': 'paris'}];

 constructor(private dataService DataService){};

 passDataToService() {
   this.dataService. allPassedData.next(this.passObjects); // here you emit 
                                             the objects 
  }

}

 // Recieved Component
 @Component({
  selector: 'app-ReceiveData',
  templateUrl: './ReceiveData.component.html',
  styleUrls: ['./ReceiveData.component.css'],
  providers: [DataService] // instead of injecting service in component inject 
                            in module for sigleton instance.
})

export class ReceiveData implements OnInit {
 selectProducts: any;
 constructor(private dataService DataService){};

 ngOnInit(){
 this.dataService.allPassedData.subscribe((allPassedData)=>{
   this.selectProducts = allPassedData;
   console.log(JSON.stringify(this.selectedProducts)); // print the data
 }) 
}

import ...
@NgModule({
 declarations: [
 PassData,
 ReceieveData
 ],
providers : [
  DataService
 ]
})

Hope it will help.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related