Child component data not getting updated from parent component

Question

I am trying to send a list from parent to child component to bind it to a mat autocomplete.

Below is my parent component //parentcomponent.html

<mat-card style="margin: 1px;">
  <search-form [(messageTypeList)]="messageTypeList" [rowData]="rowData | async">
  </search-form>
</mat-card>

In my parent component ts file

//parentcomponent.ts

messageTypeList: Messagetype[] = [];

ngOnInit() {
const messageTypeList = this.store.select(fromStore.getMessageTypeListData);
messageTypeList.pipe(takeUntil(this.unsubscribe$)).subscribe(msgTypeList => {
  if (msgTypeList.length > 0) {
    for (var i = 0; i < msgTypeList.length; i++) {
      this.messageTypeList.push(msgTypeList[i]); // this messageTypeList is send to child component
    }
  }
  else {
    this.store.dispatch(new fromStore.GetMessageTypeList({}));
  }
})

Below is my child component

 //childcomponent.ts
 @Input() messageTypeList: Messagetype[];

ngOnInit() {
 console.log('messagetypelist='+this.messageTypeList); // getting data as []
}

After parent is initialized, child is initialized, but the async ngrx call is still not complete and thus data is not present in child yet (in the ngOnInit)

After hitting the ngOnInitin child, then in the parent, the msgTypeList is populated ( async call completed) but that available data now is not being sent to child.

Do I have to convert to an observable to get the updated data or is there any other way.

Thierry Falvo Thierry Falvo · Accepted Answer · 2018-09-13T09:41:51

Sorry, I don't really understand the goal of code inside ngOnInit.

Calling selectors should return Observable. Then you just have to pass observable with pipe to your component.

So please could you try this, if it can help you. Here is what it can be (following your code) :

//parentcomponent.html

<mat-card style="margin: 1px;">
  <search-form [messageTypeList]="messageTypeList$ | async" [rowData]="rowData | async">
  </search-form>
</mat-card>

Parent component TS file

//parentcomponent.ts

messageTypeList$: Observable<Messagetype[]>;

ngOnInit() {
  this.messageTypeList$ = this.store.select(fromStore.getMessageTypeListData);

  // only if you need to load data into store before...
  this.store.dispatch(new fromStore.LoadMessageType({}));
})

Child component

//childcomponent.ts
@Input() messageTypeList: Messagetype[];

ngOnInit() {
 console.log('messagetypelist=', this.messageTypeList);
}

Child component data not getting updated from parent component

1 Answers