2

I'm developing an app in which there is a component (RecordSelectorComponent) where the user can select multiple records from a grid. The RecordSelectorComponent is nested in SharedAttributesComponents, which is nested in a WizardComponent, and that is nested in a ModalComponent. So the hierarchy looks like this:

RecordSelector -(nested in)-> SharedAttributes -> Wizard -> Modal -> App

I would like the RecordSelectorComponent to be able to share its list of selected records with the top-level app, so that at any given moment, the app can request a list of all the records currently selected. From what I understand, the best way to do this would be to create a RecordSelectorService.

My first thought was that the best way to do this was to simply use an observable, like so: 

import { Injectable } from '@angular/core';
import { Record } from './record.interface';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class RecordSelectorService {

  private selectedRecords : Array<Record>;

  private setSelected(selected : Array<Record>): void {
    this.selectedRecords = selected;
  }

  public getSelectedObservable() : Observable<Array<Record>> {
    return Observable.from(this.selectedRecords);
  }
}

However what I've learned since is that when you create an observable from an array, it's not an observable OF the array, it's an observable that emits values in the array. What I was hoping for was an observable that would emit an array of the currently selected records.

So I started doing some research on the best way to accomplish what I'm after, and things got confusing. I saw some Stack Overflow answers suggesting the best way to go would be to use a Subject, or a BehaviorSubject. I saw another suggesting I use the KnockoutJS library's observableArray. But in none of the questions did I see a use-case as dead-simple as mine: I just want one component to access the array of another component through a service, and to be updated as that array changes.

So, what is the easiest, simplest way for me to communicate the array and it's changes between components using a service?

Thank you very much in advance.

SemperCallide
  • 1,629
  • 2
  • 21
  • 37
  • Possible duplicate of [Angular2 - How to share data/change between components](http://stackoverflow.com/questions/35878160/angular2-how-to-share-data-change-between-components) – olsn Mar 10 '17 at 19:49

1 Answers1

6

The best way depends on your architecture but in order to give you an idea, take a look at this example:

@Injectable()
export class MyService {
    public invokeEvent:Subject<any> = new Subject();
    constructor() {}
}

Component1: pushes something to an array

setInterval(()=>{
    array.push(this.counter++);
    this._myService.invokeEvent.next(array);
},1000);

Component2: listens the array

this._myService.invokeEvent.subscribe((value) => {
     console.log(value); 
     this.anotherName = value;
});

Plunker example: http://plnkr.co/edit/EVC7UaO7h5J57USDnj8A

eko
  • 34,608
  • 9
  • 60
  • 85