Share object between 2 child components

Question

I have a main component with 3 sub-components.

Main component HTML structure looks like this:

<div class="container-fluid">
   <div class="row">
      <reserved-parking></reserved-parking>

      <available-parking></available-parking>

      <profile></profile>
   </div>
</div>

For instance, when a user selects parking from available-parking component information should be sent to reserved-parking component. So, I need to pass a JSON object from available-parking to reserved-parking component.

I've tried to use @Input, but no luck. Only from parent to child and vice-versa.

Thanks in advance.

Check this http://stackoverflow.com/questions/31026886/how-do-i-share-data-between-components-in-angular2 — Arpit Agarwal, Jun 29 '16 at 12:43

Ankit Singh · Accepted Answer · 2016-06-29T11:21:15.783

Use event emitters and two-way binding like this.

parent component

@Component(){
...
}
export class ParentComp{
  parkingLots: Array<any> =  [one,two,three];
  constructor(){}
}

parent template

<div class="container-fluid">
   <div class="row">
      <reserved-parking [(data)]="parkingLots"></reserved-parking>

      <available-parking [(data)]="parkingLots"></available-parking>

      <profile></profile>
   </div>
</div>

reserved-parking component

@Component(){
selector: 'reserved-parking',
inputs: ['data'],
outputs: ['dataChange'],
...
}
export class ReservedParking{
  data: Array<any>;
  dataChange: EventEmitter<Array<any>> = new EventEmitter();

  constructor(){}

  ngOnInit() {
    this.data.push('four');
    this.dataChange.emit(this.data);
  }
}

available-parking component

@Component(){
selector: 'available-parking',
inputs: ['data'],
outputs: ['dataChange'],
...
}
export class AvailableParking{
  data: Array<any>;
  dataChange: EventEmitter<Array<any>> = new EventEmitter();

  constructor(){}

  ngOnInit() {
    console.log(this.data);
   // you can also update it here and then do      
   // this.dataChange.emit(this.data); to send it out
  }
}

note: import anything required, data is arbitrary change it according to your needs, main thing is to emit the value after modification by doing dataChange.emit(this.data)

@rinukkusu , AH that , I was just applying the SO rules, answer first - modify later ;) — Ankit Singh, Jun 29 '16 at 16:26

score 3 · Answer 2 · answered Jun 29 '16 at 12:50

@Input API can be used when you have parent-child scenario and sending data from parent to child. But here, you are having sibling components. EventEmitter can be used but over the time it becomes complex.
I'd suggest to use sharedService with subject from Rxjs library.

NOTE: Please bear with Naming Convention for this example.

https://plnkr.co/edit/7A21ofKNdi0uvbMgLUDZ?p=preview

sharedService.ts (with subject)

import {Injectable} from 'angular2/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class sharedService {

    private parkingType = new Subject<string[]>();
    parkingType$ = this.parkingType.asObservable();

    ParkingType(jsonData){
     console.log(jsonData);
      this.parkingType.next(jsonData);
    }

}

availableParking.ts

import {Component} from 'angular2/core';
import {sharedService} from 'src/sharedService';

@Component({
  selector: 'navbar',
  template: `
   <h1> Available parking </h1>
   <button (click)="send()">Send Json Object</button>
  `
})
export class availableParking{
  myjson=[{"parkingType":"free parking"},{"parkingType":"paid parking"}];
  constructor(private ss: sharedService) {}

  send()
  {
     console.log(this.myjson);
    this.ss.ParkingType(this.myjson);
  }
}

reservedParking.ts

import {Component,Injectable} from 'angular2/core';
import {sharedService} from 'src/sharedService';
import {someService} from 'src/someService';
import 'rxjs/Rx';
@Component({
  selector: 'thecontent',
    template: `
    <h1>Reserved parking</h1>
    {{myjson|json}}
    `
})
export class reservedParking{
  myjson:string[];
  constructor(private ss: sharedService) {
    ss.parkingType$.subscribe((res)=>this.myjson=res); 
  }
}

Share object between 2 child components

2 Answers2

Linked