Within the parent component, I am fetching a list of products from the store:
// ...
ngOnInit() {
this.products$.subscribe(products => {
this.products = products;
})
}
// ...
<!-- ... -->
<ng-container *ngIf="products">
<product-list [products]="products"></product-list>
</ng-container>
<!-- ... -->
On the child component product-list:
// ...
@Input() products: IProduct[];
// ...
<!-- ... -->
<div *ngFor="let product of products">
<product-card [product]="product">
</div>
<!-- ... -->
Each product-card should display product.image.
The issue I am encountering is that upon initially landing on the page, all products are visible. However, if I navigate away from the page and return, the product-list does not display.
There are no error messages in the console, and I have confirmed that the child component is receiving the data upon the second render by adding debug points in the console.
Why is my child component only visible on the initial render? Even refreshing the page does not resolve the issue. The component will only display if I navigate to the page directly via the URL. Thank you in advance.