Angular OnPush not updating template

I have two components, both of which are set to OnPush. The parent component sets accountLoading to true once getAccount() is called, then sets accountLoading to false once the call is completed. As expected, the console outputs:

this.accountLoading true
​

followed by:

this.accountLoading false
​

Yet the template doesn't update, and is stuck thinking that accountLoading is true. How do I get the template to update as expected when the value changes? I'd like to keep the change detection as OnPush.

Parent component:

TypeScript:

public accountLoading: boolean;
...

getAccount() {
this.accountLoading = true;
this.authStore
.pipe(select(fromAuthStore.getAccountData))
.subscribe(account => {
if (account) {
this.accountLoading = false;
}
console.log('this.accountLoading', this.accountLoading);
});

// Loading account if it hasn't yet been loaded
this.authService.getAccount();
}


HTML:

<child-component
[accountLoading]="accountLoading">
</child-component>


Child component:

TypeScript:

@Input() accountLoading: boolean;
...


HTML:

<p *ngIf="accountLoading">
Loading...
</p>

Continue reading...