Printing in HTML with Angular based on certain conditions

Question

Printing in HTML with Angular based on certain conditions

As I cycle through a list of products, I am verifying if the product Id is already included in an array of products (objects). If it is, then I print the quantity. If not, I attempt to print 0. Here is the code snippet I have been working on:

<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>
     <span class="count" *ngIf="cartitem.p_id !== item.p_id">
         0
     </span>
   </ng-container>
</ion-item>

I am looking for a way to display 0 if item is not found within the cartitem.

javascript angular typescript ionic4

Answer 1

Answer №1

One way to achieve this is by using the ternary operator as shown in the example below:

<ng-container  *ngFor="let product of products" >
     <span class="quantity">
      {{product.id === item.id ? product.quantity : 0 }}
     </span>
</ng-container>

Answer 2

One way to achieve this is by using the ternary operator as shown in the example below:

<ng-container  *ngFor="let product of products" >
     <span class="quantity">
      {{product.id === item.id ? product.quantity : 0 }}
     </span>
</ng-container>

Answer 3

Answer №2

Utilize the *ngIf else condition within a for loop like this -

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

Answer 4

Utilize the *ngIf else condition within a for loop like this -

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

Answer 5

Answer №3

To enhance code readability, consider transferring template logic to the class itself.

The variables cart and products are already accessible within the class. Therefore, modify the fetchProducts function in the class to return the products list with quantity information included. Then, utilize a single ngFor loop in the template.

An alternative approach is to introduce a new function called getProductsWithQuantity...

Here's an example implementation 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;
}

Incorporate the following snippet into your template:

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

Answer 6

To enhance code readability, consider transferring template logic to the class itself.

The variables cart and products are already accessible within the class. Therefore, modify the fetchProducts function in the class to return the products list with quantity information included. Then, utilize a single ngFor loop in the template.

An alternative approach is to introduce a new function called getProductsWithQuantity...

Here's an example implementation 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;
}

Incorporate the following snippet into your template:

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

Printing in HTML with Angular based on certain conditions

Answer №1

Answer №2

Answer №3

Similar questions

What is the reason behind receiving undefined when using tableRow.get() in p5.js?

`HTTP Streaming with Axios in a Node JS Environment`

Encountering an error while trying to generate volume in a custom Docker image on Google Cloud

Locate the item within the array to retrieve the object's information

Setting the OrbitControls Position in ThreeJS

What steps are involved in creating a circular shape on canvas?

What is the best method for transforming HTML into valid XHTML?

Each entry is linked and separated by a comma in the text

Having trouble setting up Raygun in Angular version 6 with TypeScript?

What is the process for obtaining a push key in Firebase?

Excess whitespace found in string within mat-option

Ensure that at least one checkbox is selected by using custom validation in jQuery

Combining objects into an array of objects with matching keys

Calculate the combined sum and alter the values of three input fields

What is the best way to remove an exported JavaScript file from Node.js?

What is preventing me from connecting to dockerized npm from my host machine?

Comparing the value of a div using jQuery: A comprehensive guide

Using JSP to send variables from an external Javascript file

Value binding with conditional rendering in VueJS 2

The texture loaded by TextureLoader.load() has no defined image in IE11