CODEWITHSUNDEEP
angulartypescript
user13153470
user13153470

Reputation:

How to show different images based on click on previous page

I am new in Angular. I have 2 pages, On 1st page there is list of main categories icons is displaying. I want to show it's subcategories icon on next page based on selected main category. Example : If i click on Food then on next page=> Food's subcategories icon should display, same for Salon, Spa,etc. Below i am attaching my code. Please suggest what i can do to achieve this.

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>

Upvotes: 1

Views: 61

Answers (1)

aldokkani
aldokkani

Reputation: 910

You can pass your click function a parameter with the category

<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>

Or better if you do this through URL parameter.

Upvotes: 1

Related Questions