I have an Angular HTML document of a product catalog page.
products.componet.ts:
showCategories = true;
showProductsInCategoriesSwitcher = true;
showProductsAll = false;
showProductsInCategories = false;
fetchingProducts = false;
showProductsByCategory(categoryId: string) {
this.showCategories = !this.showCategories;
this.showProductsInCategoriesSwitcher = !this.showProductsInCategoriesSwitcher;
this.showProductsInCategories = !this.showProductsInCategories;
//further code
}
showAllProducts() {
this.showCategories = !this.showCategories;
this.showProductsAll = !this.showProductsAll;
//further code
}
products.component.html:
<div *ngIf="showProductsInCategoriesSwitcher" class="mb-4">
<input type="checkbox" checked (click)="showAllProducts()"/>
<label class="ms-1">Show products in categories</label>
</div>
<div *ngIf="showCategories">
<div *ngIf="categories$ | async as categories; else loader">
<div *ngIf="categories.length !== 0">
<c-row [gutter]="2" class="mb-2" [lg]="6" [md]="4" [xs]="1">
<c-card *ngFor="let category of categories" class="mx-1">
<div *ngIf="category._id"
(click)="showProductByCategory(category._id)">
<img cCardImg="top" [src]="category.imageSrc" />
<c-card-body>
<h2 cCardTitle>{{ category.name }}</h2>
</c-card-body>
</div></c-card>
</c-row>
</div>
</div>
</div>
<ng-container *ngIf="
(!showCategories && !showProductsInCategoriesSwitcher) ||
(!showProductsAll && showProductsInCategories)">
<ng-container *ngTemplateOutlet="
ProductsByCategory; context: { categoryId: selectedCategoryId }">
</ng-container>
</ng-container>
<ng-container *ngIf="!showCategories && !showProductsInCategories">
<ng-container *ngTemplateOutlet="ProductsAll"></ng-container>
</ng-container>
<ng-template #ProductsByCategory let-categoryId="categoryId">
<div *ngIf="!fetchingProducts; else loader">
<ng-container *ngIf="productsInCategories.length !== 0">
<a (click)="
(showCategories = !showCategories) &&
(showProductsInCategoriesSwitcher = !showProductsInCategoriesSwitcher)"
>Back to categories</a>
</ng-container>
<!-- Code for product card -->
<ng-container *ngIf="!productsInCategories || productsInCategories.length === 0">
<a href="javascript:void(0);"
(click)="(showCategories = !showCategories) &&
(showProductsInCategoriesSwitcher = !showProductsInCategoriesSwitcher)">
Back to categories</a>
<p>No products available for this category.</p>
</ng-container>
</div>
</ng-template>
<ng-template #ProductsAll><div *ngIf="!fetchingProducts; else loader">
<ng-container *ngIf="productsAll.length !== 0">
<!-- Code for product card -->
</ng-container>
<ng-container *ngIf="!productsAll || productsAll.length === 0">
<p>No products available.</p>
</ng-container>
</div>
</ng-template>
<ng-template #loader>
<div class="myspinner">
<c-spinner></c-spinner>
</div>
</ng-template>
As you can see, the page is loaded with templates for product categories and a switch for displaying types of products in categories or all products at once.
I need to implement this logic:
When you click on a category element, show products from this category and the “Return to categories” link, while hiding the “Show products by category” switch. When you click on the “Return to Categories” link, everything should return to its original state.
When you click the “Show products in categories” switch, show all products at once, while hiding the product categories template. When you press the switch again, everything should return to its original state.
I’m stuck trying out options for displaying templates, but the logic of their behavior changes every time.
Please explain to me how this logic is implemented, or tell me how to correctly ask in Google. Thank you.
