How do I create Observable from an @Input variable child value?

Question

I have a child component that takes an @Input value from a dropdown box of a parent component. This value has an array of objects that I want to pass as the data source to a table so I need to construct some Observable to maintain this and have it change when the @Input value changes, etc... I know this is a basic question but still wrapping my head around Angular design paradigm.

Given an @Input value as such:

   @Input() parentObject: ParentObject

I have tried referencing the value directly like:

   rowData = this.parentObject._rows;

This breaks because it is populated async so at runtime parentObject is initially undefined.

I have tried:

   ngOnChanges(change: SimpleChanges){
      if (changes.parentObject.currentValue){
         rowData = changes.parentObject.currentValue._rows;
      }
   }

This breaks because the _rows is an array and not an Observable. I guess I could wrap the _rows into an Observable when I set it but that seems hacky.

Note that I'm not trying to pass the value back to a parent, just consume it within a table in the child component. I also experimented using a Subject and that compiles and runs fine but for some reason the table does not receive the updated data. I have included that code here so be more clear what I'm doing:

   rowData = new Subject<Row[]>();

   ngOnChanges(change: SimpleChanges){
      if (changes.parentObject.currentValue){
         this.rowData.next(changes.parentObject.currentValue._rows);
      }
   }

and in my .html:

   <ag-grid-angular
     style="width: 500px; height: 500px;"
     class="ag-theme-balham"
     [rowData]="rowData | async"
     [columnDefs]="columnDefs">
   </ag-grid-angular>

I'm sure there's some really basic way of doing this interaction that I'm not considering.

See `@Output()` and `EventEmitter`. Its the inverse of an `@Input` in that the component can broadcast back up to the parent component when something has changed. — Igor, Oct 02 '19 at 19:30
Possible duplicate of [How to pass values from child to parent component in Angular 4](https://stackoverflow.com/questions/49228423/how-to-pass-values-from-child-to-parent-component-in-angular-4) — Igor, Oct 02 '19 at 19:33
Actually this one is more fitting as a duplicate. [Pass data from child to parent component Angular2](https://stackoverflow.com/a/42109866/1260204) — Igor, Oct 02 '19 at 19:33
sorry for not explaining better - not trying to pass value to a parent, just consume it in a table where [rowData]="rowData | async". I edited the question — Greg, Oct 02 '19 at 19:54
I suggest you include an [mcve]. See also [ask]. That will help others who would like to help you with your question. — Igor, Oct 02 '19 at 19:55

score 1 · Accepted Answer · answered Oct 02 '19 at 20:16

I like how Services work. Create a service component, name it EventService.... Then add eventEmitters like this, into the EventService.TS file.

SomeEvent = new EventEmitter<any>();

Then the parent and child components will each import the EventService

import { EventService } from "../../services/event.service";

Add this to the parent's and child's constructor:

private EventService: EventService,

When ready the parent will fire the event.

EventService.SomeEvent.Emit(data);

Make sure the child has subscribed to the event...

SomeEvent.Subscribe(data=>{//data is here});

How do I create Observable from an @Input variable child value?

1 Answers1