3

My structure is the following:

parent.component.html

<listing-categories #listingCategories [categories]="listingsPaths"></listing-categories>

parent.component.ts

this.listingsPaths = [];
for (let category of listing.categories) {
    // Subscribing to a service and pushing the data to an listingPaths
    this._projectService.getCategories().subscribe((data) => {
     this.listingsPaths.push(data);
    });
}

child.component.ts

@Input() public categories;

child.component.html ...

As you can see I want to send the listingPaths array which is populated in promise, and I want to render it in a child component. I've tried using OnChanges on child component but there weren't any changes triggered when I would push a new object to an array.

I managed to do a 'work around' by creating an Observable and emitting the newly added item to a Child component. How ever I would like to send an array as a whole to a Child component, not emit item by an item.

Here is the solution with Observable:

parent.component.ts

_listingPaths = new Subject<any>();
_listingPathsChanges$ = this._listingPaths.asObservable();

And in for loop, instead of pushing the item to an array, I am emitting it to the child component as:

this._listingsPaths.next(data);

child.component.ts

 this.categories.subscribe((data) => {
     this._categories.push(data); // I don't want this part, I want to receive whole array from a parent
     this.cd.markForCheck();
 })
6
  • Have you set the ChangeDetectionStrategy.OnPush in your child copmonent?? If yes, then you may need to remove it. Any change in the array is not a change in object reference and hence it wont trigger a change detection cycle. Commented Nov 26, 2018 at 17:46
  • Alternatively, you can create an observable and send the data to child using the async pipe (observable$ | async). Commented Nov 26, 2018 at 17:48
  • Yes I did. It’s a bit weird that this would be the solution. How would the one deal with it then if you need to listen for changes both for object and array? I will try to do it tomorrow, thanks! Commented Nov 26, 2018 at 17:52
  • Read my second comment. Use observables. If you are updating the object manually, use obj = Object.assign({},obj) to create a new instance of the object and trigger the change detection. Commented Nov 26, 2018 at 17:54
  • Removing ChangeDetectionStrategy.OnPush worked. I'm really curious why this was the cause, going to research it a bit. Thanks! Commented Nov 27, 2018 at 8:56

1 Answer 1

5

Have you set the ChangeDetectionStrategy.OnPush in your child component?? If yes, then you may need to remove it. Any change in the array is not a change in object reference and hence it wont trigger a change detection cycle.

Alternatively, you can create an observable and send the data to child using the async pipe (observable$ | async).

Sign up to request clarification or add additional context in comments.

1 Comment

This solution worked like magic after trying onChanges, *ngIf and what not. Thanks a lot @Sachin

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.