title: How to pass array of objects in angular app from one component to another component
body: <p>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 <a href="https://stackoverflow.com/questions/44725006/pass-array-of-int-in-angular-route">Pass array of int in Angular Route</a></p>
  <p><strong>PassData.html</strong></p>
  <pre><code>&lt;div&gt;
   &lt;button type=&quot;button&quot; [routerLink]=&quot;['/receive-data']&quot;&gt;Pass Data&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>PassData.ts</strong></p>
  <pre><code>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);
    }
      
  }
  </code></pre>
  <p><strong>ReceiveData.ts</strong></p>
  <pre><code>@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
  }
  </code></pre>
  <p>This is angular service
  <strong>DataService.ts</strong></p>
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable()
  export class DataService {
  
      allPassedData: any[] = [];
      constructor() {}
     
      storePassedObject(passedData) {
          this.allPassedData = passedData;
         
      }
  
      retrievePassedObject() {
          return this.allPassedData;
          
      }
  }
  </code></pre>
  <p>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.</p>
  <p>I have registered in app.module.ts
  This is app.module.ts</p>
  <pre><code>import ...
  @NgModule({
   declarations: [
    PassData,
    ReceieveData
   ],
   providers : [
  DataService
   ]
  })
  </code></pre>
  <p>export class  AppModule { }</p>
  <p>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?</p>