Angular 4 Child View not updating
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
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();
})
angular asked Nov 26 '18 at 17:38
DinoDino
1,1842828
|
show 1 more comment
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();
})
asked Nov 26 '18 at 17:38
DinoDino
1,1842828
Have you set theChangeDetectionStrategy.OnPushin 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.
– Sachin Gupta
Nov 26 '18 at 17:46
Alternatively, you can create an observable and send the data to child using the async pipe(observable$ | async).
– Sachin Gupta
Nov 26 '18 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!
– Dino
Nov 26 '18 at 17:52
Read my second comment. Use observables. If you are updating the object manually, useobj = Object.assign({},obj)to create a new instance of the object and trigger the change detection.
– Sachin Gupta
Nov 26 '18 at 17:54
Removing ChangeDetectionStrategy.OnPush worked. I'm really curious why this was the cause, going to research it a bit. Thanks!
– Dino
Nov 27 '18 at 8:56
|
show 1 more comment
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();
})
asked Nov 26 '18 at 17:38
DinoDino
1,1842828
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();
})
asked Nov 26 '18 at 17:38
DinoDino
1,1842828
asked Nov 26 '18 at 17:38
DinoDino
1,1842828
asked Nov 26 '18 at 17:38
DinoDino
1,1842828
asked Nov 26 '18 at 17:38
DinoDino
1,1842828
asked Nov 26 '18 at 17:38
DinoDino
1,1842828
1,1842828
Have you set theChangeDetectionStrategy.OnPushin 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.
– Sachin Gupta
Nov 26 '18 at 17:46
Alternatively, you can create an observable and send the data to child using the async pipe(observable$ | async).
– Sachin Gupta
Nov 26 '18 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!
– Dino
Nov 26 '18 at 17:52
Read my second comment. Use observables. If you are updating the object manually, useobj = Object.assign({},obj)to create a new instance of the object and trigger the change detection.
– Sachin Gupta
Nov 26 '18 at 17:54
Removing ChangeDetectionStrategy.OnPush worked. I'm really curious why this was the cause, going to research it a bit. Thanks!
– Dino
Nov 27 '18 at 8:56
|
show 1 more comment
Have you set theChangeDetectionStrategy.OnPushin 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.
– Sachin Gupta
Nov 26 '18 at 17:46
Alternatively, you can create an observable and send the data to child using the async pipe(observable$ | async).
– Sachin Gupta
Nov 26 '18 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!
– Dino
Nov 26 '18 at 17:52
Read my second comment. Use observables. If you are updating the object manually, useobj = Object.assign({},obj)to create a new instance of the object and trigger the change detection.
– Sachin Gupta
Nov 26 '18 at 17:54
Removing ChangeDetectionStrategy.OnPush worked. I'm really curious why this was the cause, going to research it a bit. Thanks!
– Dino
Nov 27 '18 at 8:56
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.– Sachin Gupta
Nov 26 '18 at 17:46
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.– Sachin Gupta
Nov 26 '18 at 17:46
Alternatively, you can create an observable and send the data to child using the async pipe
(observable$ | async).– Sachin Gupta
Nov 26 '18 at 17:48
Alternatively, you can create an observable and send the data to child using the async pipe
(observable$ | async).– Sachin Gupta
Nov 26 '18 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!
– Dino
Nov 26 '18 at 17:52
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!
– Dino
Nov 26 '18 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.– Sachin Gupta
Nov 26 '18 at 17:54
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.– Sachin Gupta
Nov 26 '18 at 17:54
Removing ChangeDetectionStrategy.OnPush worked. I'm really curious why this was the cause, going to research it a bit. Thanks!
– Dino
Nov 27 '18 at 8:56
Removing ChangeDetectionStrategy.OnPush worked. I'm really curious why this was the cause, going to research it a bit. Thanks!
– Dino
Nov 27 '18 at 8:56
|
show 1 more comment
1 Answer
1
active
oldest
votes
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).
answered Nov 27 '18 at 17:41
Sachin GuptaSachin Gupta
1,5531617
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53486340%2fangular-4-child-view-not-updating%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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).
answered Nov 27 '18 at 17:41
Sachin GuptaSachin Gupta
1,5531617
add a comment |
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).
answered Nov 27 '18 at 17:41
Sachin GuptaSachin Gupta
1,5531617
add a comment |
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).
answered Nov 27 '18 at 17:41
Sachin GuptaSachin Gupta
1,5531617
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).
answered Nov 27 '18 at 17:41
Sachin GuptaSachin Gupta
1,5531617
answered Nov 27 '18 at 17:41
Sachin GuptaSachin Gupta
1,5531617
answered Nov 27 '18 at 17:41
Sachin GuptaSachin Gupta
1,5531617
answered Nov 27 '18 at 17:41
Sachin GuptaSachin Gupta
1,5531617
1,5531617
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53486340%2fangular-4-child-view-not-updating%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Have you set the
ChangeDetectionStrategy.OnPushin 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.– Sachin Gupta
Nov 26 '18 at 17:46
Alternatively, you can create an observable and send the data to child using the async pipe
(observable$ | async).– Sachin Gupta
Nov 26 '18 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!
– Dino
Nov 26 '18 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.– Sachin Gupta
Nov 26 '18 at 17:54
Removing ChangeDetectionStrategy.OnPush worked. I'm really curious why this was the cause, going to research it a bit. Thanks!
– Dino
Nov 27 '18 at 8:56