CODEWITHSUNDEEP
javascriptangulartypescriptionic4
Amar Singh
Amar Singh

Reputation: 5622

Conditional print on html of angular

I am looping through a list of products and then checking if the product Id is already present in an array of products(objects) , then printing the quantity else if the product is not in the object then trying to print 0. Below is the code I have tried till now.

<ion-item class="added" *ngFor="let item of fetchProducts();let key=index;">
  <ng-container  *ngFor="let cartitem of cart" >
     <span class="count" *ngIf="cartitem.p_id==item.p_id;">
         {{cartitem.qty}}
     </span>
   </ng-container>
</ion-item>

How to print 0 if item is not in the cartitem in same span.

Upvotes: 0

Views: 2135

Answers (3)

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

You can simply do this using ternary operator like below. 

<ng-container  *ngFor="let cartitem of cart" >
     <span class="count">
      {{cartitem.p_id==item.p_id ? cartitem.qty : 0 }}
     </span>
</ng-container>

Upvotes: 1

spierala
spierala

Reputation: 2699

Instead of using template logic I would move the logic to the class.

cart and products are obviously available in the class. Therefore adjust the fetchProducts function in the class to return the products list as needed (with the quantity information) and use a single ngFor loop in the template.

Or add a new function getProductsWithQuantity...

In your class

    public getProductsWithQuantity() {
        return this.fetchProducts().map(product => {
            ...product,
            quantity: this.getQuantity(product);
        });
    }

    private getQuantity(product) {
        const foundCartItem = this.cart.find(cartItem => product.id === cartItem.id);
        if (foundCartItem) {
            return foundCartItem.qty;
        }
        return 0;
    }

In your template: 

<ion-item class="added" *ngFor="let item of getProductsWithQuantity();let key=index;">
   <span class="count">
       {{item.qty}}
   </span>
...

Upvotes: 0

last_seen_404
last_seen_404

Reputation: 202

Can use *ngIf else condition inside your for loop - 

<ion-item class="added" *ngFor="let item of fetchProducts();let key=index;">
  <ng-container *ngFor="let cartitem of cart">
    <span class="count" *ngIf="cartitem.p_id==item.p_id; then content else other_content">
    </span>
    <ng-template #content>{{cartitem.qty}}</ng-template>
    <ng-template #other_content>0</ng-template>

  </ng-container>
</ion-item>

Upvotes: 0

Related Questions