Currently, I am in the process of developing an application that includes a component called RecordSelectorComponent. This component allows users to select multiple records from a grid. The RecordSelectorComponent is nested within SharedAttributesComponents which, in turn, is nested within a WizardComponent, then further nested within a ModalComponent. Thus, the hierarchy looks like this:
RecordSelector -(nested in)-> SharedAttributes -> Wizard -> Modal -> App
My goal is for the RecordSelectorComponent to share its list of selected records with the main app so that at any given time, the app can request a list of all currently selected records. After some consideration, it seems that creating a RecordSelectorService would be the most effective approach.
Initially, my idea was to use an observable to achieve this, as shown below:
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, I soon realized that creating an observable from an array does not result in an observable OF the array, but rather an observable that emits values within the array. My intention was to have an observable that emits an array of the currently selected records.
This realization prompted me to delve into research to find the best way to accomplish my objective. Amidst the plethora of information, there were suggestions on using a Subject or a BehaviorSubject. Some even recommended utilizing KnockoutJS library's observableArray. Yet, none of the solutions seemed tailored to my straightforward scenario: a single component needing access to another component's array through a service and staying updated with its changes.
Therefore, I seek guidance on the easiest and simplest method to facilitate communication of the array and its modifications between components via a service.
I appreciate your assistance in advance.