Styjun

I have generated a bill there are a number of items in the bill and I have to hide the items which have charge amt is = 0 and it should print the item on the bill which has charge amt > 0

this is my html file

this my view bill page

1. 
   

   List item

   
   
   
   
   
   
   

   <ion-title align="left">Bill</ion-title> </ion-navbar>
   

   
   
   
   
   

   
   English
   German
   Spanish
   French
   Marathi

   
   
   

   
   -->
   
   
   

   
   

   
   चारकोप (1)enter code here
   item.Society_Name</b> -->
   

   
   
   
   
   
   
   
   
   
   -->
   
   

   <div class="row" style=" border-bottom: solid black;
   border-width: 1px;">
   
    <div class="col">पावती क्रमांक :
    <b>this.name.bill_no</b>
    </div>
   </div>
   <div style="display: grid;
   grid-template-columns: auto auto;">
    <div style=" border: 1px solid rgba(0, 0, 0, 0.8);
    float:left;
    text-align: center;">Name :
    <b>this.name.bill_name </b></div>
    <div style=" border: 1px solid rgba(0, 0, 0, 0.8);
    float:right;
    text-align: center;">Bill Date :
    <b>this.name.bill_period</b></div>
   
    <div style=" border: 1px solid rgba(0, 0, 0, 0.8);
    float:left;
    text-align: center;">
    Bill For : <b>this.name.bill_period</b>
    </div>
    <div style=" border: 1px solid rgba(0, 0, 0, 0.8);
    float:right;
    text-align: center;">
    Due Date : <b>this.name.bill_due</b>
    </div>
   
    <div style=" border: 1px solid rgba(0, 0, 0, 0.8);
    float:left;
    text-align: center;">
    Wing :
    <b>this.name.wing</b>
    </div>
    <div style=" border: 1px solid rgba(0, 0, 0, 0.8);
    float:right;
    text-align: center;">
    Floor No : <b>2</b>
    </div>
   </div>
   <div style="display: grid;
   grid-template-columns: auto auto auto;">
    <div class="col" style="background-color: rgb(255, 173, 22);
    color: white; float: left; " >
    <b>Sr.</b>
    </div>
    <div class="col" style="background-color: rgb(255, 173, 22);
    color: white; float: left; " >
    <b>शुल्क विशेष</b>
    </div>
    <div class="col" style="background-color: rgb(255, 173, 22);
    color: white; float: left; ">
    <b>रक्कम</b>
    </div>
   </div>
   <div style="display: grid;
   grid-template-columns: auto auto auto;">
   
    <div class="col" style="background-color: rgb(228, 227, 227);" >
    <div class="row" style="background-color: rgb(228, 227, 227);" *ngFor="let item of particulars; let i = index">i + 1</div>
    </div>
    <div class="col" size="8" style="background-color: rgb(228, 227, 227); " >
   
    <div class="row" style="background-color: rgb(228, 227, 227);" *ngFor="let item of particulars">item.title</div>
    <!-- <ion-item *ngIf="this.products === charg_amt && charg_amt === 0"></ion-item> -->
    </div>
    <div class="col" style="background-color: rgb(228, 227, 227); " >
    <div class="row" style="background-color: rgb(228, 227, 227);" *ngFor="let item of particulars">item.charg_amt</div>
    <!-- <ion-item *ngIf="!this.item.charg_amt.deleted === false">name.charg_amt </ion-item> -->
    <!-- <div *ngIf="this.products === charg_amt"> -->
   
    </div>
   
   </div>
   <!-- <div class="row" style=" border-bottom: solid black;
   border-width: 1px;">
    <div class="col particularsList" style="background-color: rgb(228, 227, 227);" col-2>
    <div class="row particularsList" style="background-color: rgb(228, 227, 227);" *ngFor="let item of particulars; let i = index">i + 1</div>
    </div>
    <div class="col particularsList" style="background-color: rgb(228, 227, 227);" col-50>
    <div class="row particularsList" style="background-color: rgb(228, 227, 227);" *ngFor="let item of particulars">item.charge_title</div>
    </div>
    <div class="col particularsList" style="background-color: rgb(228, 227, 227);" col-3>
    <div class="row particularsList" style="background-color: rgb(228, 227, 227);" *ngFor="let item of particulars">item. charge_amt</div>
    </div>
   </div> -->
   
   <div style="display: grid;
   grid-template-columns: auto auto auto auto;
   grid-gap: 1px; border-bottom: solid black;
   border-width: 1px;">
    <div class="col" style="grid-column: 1 / span 2;">मागील तारख :- २१७०८</div>
    <div class="col" >
    <div class="row" style="grid-column: 2 ;">
    <div class="col">उप एकूण ₹</div>
   
    <div class="col">this.name.sub_Total</div>
    </div>
    <div class="row" style=" border-bottom: solid black;
    border-width: 1px;">
    <div class="col particularsList" style="background-color: rgb(228, 227, 227);" >
    <b>एकूण देय रक्कम ₹</b>
    </div>
    <div class="col particularsList" style="background-color: rgb(228, 227, 227);" >
    <b>this.name.grand_total</b>
    </div>
    </div>
    </div>
   </div>
   
   <div class="row" style=" border-bottom: solid black;
   border-width: 1px;">
    <div class="col">
    <B>नियम:</B> 
    <P>1. प्रत्येक महिन्याच्या २० तारखेपर्यंत देखभाल खर्चाचा कर
    प्रदान करावा . कर प्रदान न केल्यास २१% दराने बाकी रक्कमेवर व्याज आकारला जाईल. </P>
    <P>2. प्रत्येक महिन्याच्या २० तारखेच्या आत देयकाची रक्कम प्रधान करावी.</P>
    <P>3. धनादेशाने रक्कम भरायची असल्यास धनादेश चारकोप (१) 
    लि या नावाने.२० तारीखेयपूर्वी घ्यावा.</P> 
    <!-- <p *ngFor="let item of RuleData; let i = index">i+1.item.rule </p> -->
   
    </div>
   </div>
   
   <div class="row" style=" border-bottom: solid black;
   border-width: 1px;">
    <div class="col particularsList" style="background-color: rgb(228, 227, 227);" align="right">
    `enter code here` (1) 
    </div>
   </div>
   
   <div class="row authSign" style=" height: 100px;" >
    <div class="col" align="right">
    <b>अधिकृत सही</b>
    </div>
   </div>
   

   
   
   

   
   
   
   item.title (item.charg_amt)
   
   Bearbeiten
   Löschen
   
   
   
   
   
   
   
   Print
   
   

   
   
   
   

Try this

 <ion-item-sliding *ngIf="!item.deleted && item.charg_amt" #products>

The change I've made is added a condition && item.charg_amt in your ngIf