Not able to strike off the actual price on whether the discount is available or not in Ionic

by Raghav   Last Updated January 11, 2019 12:26 PM - source

I am working Ionic Ecommerce App and using API made in Laravel. I have fetched the products in which I am showing the actual price, discount and the final price. But the problem is that, if the discount is 0, it should not strike off the actual price and if the discount exists it should strike off the actual price and show the final price.

This is my productdetails.html:

<ion-header>

  <ion-navbar>
    <ion-title>Products</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
<ion-row align-items-center class="mynewr11">
 <ion-col *ngFor="let product of this.pdeta" col-5 class="mynewcol22">
  <img class="myimg11" src="{{product.image}}" />
  <p>{{ product.product_name }}</p>
  <p><strong>Actual Price:</strong> <span [ngStyle]="product.discount === 0 && {'text-decoration':'line-through'}  || product.discount === 1 && {'text-decoration':'none'}">₹{{product.product_price * product?.count}}</span></p>
  <p><strong>Discount:</strong> {{product.discount}}%</p>
  <p><strong>Discount Price:</strong> ₹{{ product.product_actual_price * product?.count }}</p>
  <button class="mybtn11" (click)="addToCart(product)" ion-button small>
    Add to Cart
  </button>
  <button ion-button icon-only class="wish-list-btn card" (click)="toggleOnWishlist(product)" color="light" class="mywisbtn11">
    <ion-icon [name]="product.onWishlist ? 'ios-heart' : 'heart-outline' "></ion-icon>
  </button>
 </ion-col>
</ion-row>
</ion-content>

In this html, I have applied the style="text-decoration:line-through" on the actual price but when the discount is 0, it should not strike off the actual price. I have applied the this for the actual price but it is not working:

[ngStyle]="product.discount === 0 && {'text-decoration':'line-through'}  || product.discount === 1 && {'text-decoration':'none'}"

The login is :

ionViewDidLoad() {
    if(product.discount == '0')
    {
       dont strike off the actual price
    }
    else
    {
        strike off the actual price
    }
  }

I am trying to apply the login but couldn't get it. I have also defines the reference in the discount. Any help is much appreciated.



Answers 1


The way you've applied the [ngStyle] is wrong.

Try this:

<p>
  <strong>Actual Price:</strong>
  <span [ngStyle]="product.discount === 0 ? {'text-decoration':'line-through'} : {'text-decoration':'none'}">
    ₹{{product.product_price * product?.count}}
  </span>
</p>
SiddAjmera
SiddAjmera
January 11, 2019 12:25 PM

Related Questions


How to add specific image by id in get method in ionic

Updated January 02, 2019 11:26 AM



Can't manage to fetch img url from a typescript file

Updated August 27, 2018 12:26 PM

How to write data into csv file from ionic form?

Updated August 12, 2017 09:26 AM