On the parent page, I am passing user data to a child component in this way:
<ng-container *ngIf="leaderboard">
<app-leaderboard-preview [user]="user" (click)="goToLeaderboard()"></app-leaderboard-preview>
</ng-container>
In the parent page's ngOnInit(), I subscribe to an observable that returns a user object and sets the user variable after parsing the result as shown below:
combineLatest([this.userQuery$]).subscribe((results) => {
Promise.all([this.parseUser(results[4])])
})
I have learned that ngOnChanges() only triggers when there is a new object created. Therefore, I use Object.assign() to assign the new user object as a separate entity for the app-leaderboard-preview component.
parseUser(user) {
return new Promise((resolve) => {
if(user) {
this.user = Object.assign({}, user);
resolve(user);
} else {
resolve(user);
}
})
}
The component loads successfully, but the user's ranking can change. When a user pulls down to refresh the page, the value should update. However, it does not. The code snippet below attempts to refresh the page without a complete reload.
doRefresh(event) {
if (this.user) {
this.userQuery$ = this.db.query$(`user/find?id=${this.user.id}`);
combineLatest([this.userQuery$]).subscribe((results) => {
Promise.all([this.parseUser(results[4])])
})
}
This method calls the parseUser function to update the user object used by the app-leaderboard-preview component.
Despite passing a "new" object to the component, ngOnChanges is not triggered. What could be missing in my approach?