Ways to display various images by clicking on the previous page

I recently started using Angular and I am facing a challenge with my 2-page setup. On the first page, there is a list of main category icons displayed. I would like to show the subcategory icons on the next page based on the selected main category. For example, if I click on "Food," then on the next page, the subcategories related to food should be displayed. The same applies to categories like Salon, Spa, etc. Below is the code snippet for your reference. Any suggestions on how I can achieve this would be greatly appreciated.

dashboard.component.html

    <div class="productBlock">
                <div class="container" style="text-align:-webkit-center">
                    <div>
              <owl-carousel [options]="{items:5, dots:true, navigation:true}"
               [carouselClasses]="['owl-theme', 'row', 'sliding','prev' , 'next']">

                        <a class="product-single"><div><img style="width: 60px; height: 60px;"  src="assets/images/food.png" (click)="productListItemClick()" alt=""></div><span>Food</span></a>
                        <a class="product-single"><div><img style="width: 60px; height: 60px;"   src="assets/images/activities.png" (click)="productListItemClick()" alt=""></div><span>Activities</span></a>
                        <a class="product-single"><div><img style="width: 60px; height: 60px;"   src="assets/images/fitness.png" (click)="productListItemClick()" alt=""></div><span>Fitness</span></a>
                        <a class="product-single"><div><img style="width: 60px; height: 60px;"  src="assets/images/salon.png" (click)="productListItemClick()" alt=""></div><span>Salon</span></a>
                        <a class="product-single"><div><img  style="width: 60px; height: 60px;"  src="assets/images/spa.png" (click)="productListItemClick()" alt=""></div><span>Spa</span></a>
              </owl-carousel>
                    </div>
                </div>
            </div>

dashboard.component.ts

productListItemClick()
{
    this.router.navigate(['/deals']);
  }

deals-list.component.html

<div class="productBlock">
            <div class="container" style="text-align:-webkit-center">
                <div *ngIf="food">
                    <owl-carousel [options]="{items:2, dots:true, navigation:true}"
                    [carouselClasses]="['owl-theme', 'row', 'sliding','prev' , 'next']">

                             <a class="product-single"><div><img style="width: 60px; height: 60px;"  src="assets/images/cafes.png" alt=""></div><span>Cafes</span></a>
                             <a class="product-single"><div><img style="width: 60px; height: 60px;"   src="assets/images/desserts.png" alt=""></div><span>Desserts</span></a>
                   </owl-carousel>
                </div>

                <div *ngIf="spa">
                    <owl-carousel [options]="{items:2, dots:true, navigation:true}"
                    [carouselClasses]="['owl-theme', 'row', 'sliding','prev' , 'next']">

                             <a class="product-single"><div><img style="width: 60px; height: 60px;"  src="assets/images/body.png" alt=""></div><span>Body</span></a>
                             <a class="product-single"><div><img style="width: 60px; height: 60px;"   src="assets/images/ayurvedic.png" alt=""></div><span>Ayurvedic</span></a>
                   </owl-carousel>
                </div>

                <div *ngIf="salon">
                    <owl-carousel [options]="{items:2, dots:true, navigation:true}"
                    [carouselClasses]="['owl-theme', 'row', 'sliding','prev' , 'next']">

                             <a class="product-single"><div><img style="width: 60px; height: 60px;"  src="assets/images/hair.png" alt=""></div><span>Hair Care</span></a>
                             <a class="product-single"><div><img style="width: 60px; height: 60px;"   src="assets/images/makeup.png" alt=""></div><span>Makeup</span></a>
                   </owl-carousel>
                </div>
            </div>
        </div>
angulartypescript

Answer №1

You have the option to include a category parameter in your click function

<div class="productBlock">
                <div class="container" style="text-align:-webkit-center">
                    <div>
              <owl-carousel [options]="{items:5, dots:true, navigation:true}"
               [carouselClasses]="['owl-theme', 'row', 'sliding','prev' , 'next']">

                        <a class="product-single"><div><img style="width: 60px; height: 60px;"  src="assets/images/food.png" (click)="productListItemClick('Food')" alt=""></div><span>Food</span></a>
                        <a class="product-single"><div><img style="width: 60px; height: 60px;"   src="assets/images/activities.png" (click)="productListItemClick('Activities')" alt=""></div><span>Activities</span></a>
                        <a class="product-single"><div><img style="width: 60px; height: 60px;"   src="assets/images/fitness.png" (click)="productListItemClick('Fitness')" alt=""></div><span>Fitness</span></a>
                        <a class="product-single"><div><img style="width: 60px; height: 60px;"  src="assets/images/salon.png" (click)="productListItemClick('Salon')" alt=""></div><span>Salon</span></a>
                        <a class="product-single"><div><img  style="width: 60px; height: 60px;"  src="assets/images/spa.png" (click)="productListItemClick('Spa')" alt=""></div><span>Spa</span></a>
              </owl-carousel>
                    </div>
                </div>
            </div>

An alternative approach would be passing the category through URL parameters.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An error occurred with the datepicker: Unable to connect to 'bsValue' as it is not recognized as a property of 'input'

Despite importing DatepickerModule.forRoot() in my Angular unit test, I am encountering the following error: Error: Template parse errors: Can't bind to 'bsConfig' since it isn't a known property of 'input'. (" ...

javascriptangulartypescriptdatepickerngx-bootstrap

Managing quick mouse movements while resizing an element during a mousemove event

I'm seeking to implement a resizable modal that only adjusts its height. I've written some code, but when I attempt to extend it downwards quickly, it exceeds the element boundaries without any effect. I've come across codes that work proper ...

javascripthtmlcssreactjstypescript

Apply dynamic directives to an HTML string fetched from the server

Receiving a string of HTML from the server with custom directive attributes that Angular should render, but struggling to make the directives work. Is it possible to load HTML containing custom directives? I've been using DomSanitizer.bypassSecurityT ...

angulartypescript

Encountering error while running npm ci: 'Error reading property '@angular/animations' as undefined'

During the docker build process of my Angular project, I encountered an error while running the npm ci command: Cannot read property '@angular/animations' of undefined Despite the lack of a clear explanation in the error message, we have been st ...

node.jsangularnpm

What strategies are most effective for managing prop function arguments in React with TypeScript?

Imagine having the following scenario: type Props = { onClose: () => void } const MyComponent = ({ onClose }: Props) => { // my component } However, there is a possibility that onClose could accept any function with potentially different argumen ...

javascriptreactjstypescript

Accessing information independent of Observable data in TypeScript

When attempting to send an HttpRequest in Typescript, I encountered an issue where the received data could not be stored outside of the subscribe function. Despite successfully saving the data within the subscribe block and being able to access it there, ...

angularjstypescriptobservablehttprequestsubscribe

Is there a way to prevent the leaderboard from resetting each time I restart my client?

Is it possible to prevent the leaderboard from resetting every time I restart my client? You can see an example here: https://i.stack.imgur.com/2nEPw.png Please disregard the "undefined" error, I will correct it. In the current setup, the leaderboard onl ...

typescriptdiscordleaderboard

Leverage the power of OpenLayers 5's TypeScript extent.js within an Angular 7 environment

Currently, I am attempting to utilize the "extend" function from extent.js, which is housed under the "ol" library as a standalone file within my codebase. My initial approach was importing it in this manner... import olExtent from '../../../../../n ...

angularopenlayersopenlayers-5

Encountering an undefined property error while using Reactjs

I made an attempt to retrieve data using an ajax request, but I am uncertain about the correctness of my code. Here is the code snippet: interface IProps { data: IScheduler; } interface IState { list: IScheduler; } export default class Page extends ...

ajaxreactjstypescriptundefinedaxios

Leveraging symbols as object key type in TypeScript

I am attempting to create an object with a symbol as the key type, following MDN's guidance: A symbol value may be used as an identifier for object properties [...] However, when trying to use it as the key property type: type obj = { [key: s ...

javascripttypescripttypessymbols

Accessing the total number of items from a service in Angular

I am facing an issue with my cart-service and 2 components. The product-list component is responsible for displaying the products along with a buy button. However, the top-bar component seems to have trouble displaying the count when I try to directly call ...

angular

Angular 2's filter pipe is not producing any results

I am facing an issue with using the filter pipe to filter my data as it is returning an empty page. Interestingly, when I remove the | filter from the HTML code, the data appears as expected. The filter pipe should display all names if the name exists. Th ...

angulartypescriptangular2-pipe

Angular 2: Successfully invoking a component and receiving the parameter is a one-time deal

In my code, I have set up a route like this: { path: 'manageagreements', component: ManageagreementsComponent, children: [ { path: 'editagreement/:agreement', component: EditagreementComponent }, ] ...

angularangular2-routing

The value of 'e.target.files' could potentially be null

After selecting a file in my input component, I extract its content. The code I used is from this source An error has arisen related to the line onChange={e => handleFileChosen(e.target.files[0])}, specifically highlighting e.target.files. The error m ...

reactjstypescriptfileeventsreact-tsx

Creating an API using a JSON file in Node.js

I am currently working on creating an API using Node.js with a JSON file. Initially, I set up a simple GET request in Node.js from the JSON file to filter out unnecessary data and build a new response based on the content of the JSON file. The code snipp ...

node.jsjsonangularapiexpress

Encountering an error message stating "Cannot access 'color' property of undefined" while setting up HighCharts in my xx.ts file

I am new to incorporating highcharts into my project and struggling with it. Despite following documentation and trying various methods, I have not been able to make it work as intended. My multi-series high charts were functioning properly until I decide ...

angularhighcharts

Discovered a total of 55 security flaws, categorized as 1 low-risk, 32 moderate-risk, 21 high-risk,

npm install 1 package removed, and 1819 packages audited in 30 seconds 100 packages are seeking funding run `npm fund` for more information 55 vulnerabilities found (1 low, 32 moderate, 21 high, 1 critical) To fix issues that don't need immediate ...

angular

How can one view all the static variables and methods associated with a class in Typescript or ES6?

Is it possible to retrieve all static variable names and static method names associated with a class, similar to how the Object.keys method returns a list of key names attached to an object? Typescript Example: class FindStatics { static num1:string = ...

javascripttypescriptecmascript-6

Developing a zod blueprint for a versatile interface

Recently, I created a basic interface to handle paginated responses. It looks like this: export interface PaginatedResponse<T> { pageIndex: number; pageSize: number; totalCount: number; totalPages: number; items: Array<T>; } Now, I w ...

typescriptruntimezod

Having trouble with the ag-grid demo - grid not displaying as intended

Struggling to wrap my head around the "ag-grid" Typescript grid component for use in my Angular 6 applications. The website seems promising, but I am having trouble getting their "Getting Started" demo to function on my setup. I followed all the setup st ...

angularag-grid