CODEWITHSUNDEEP
ionic-frameworkionic2
arun kumar
arun kumar

Reputation: 735

ionic2: Need help in displaying product list with ion-item

I would like to display a product list with ion-list and ion-item.

For each product, the first line show the product name and second line should show the product details in small fonts.

An icon on the right end to open a product detail page.

Below is the code snippet:

 <ion-list>
    <ion-item *ngFor="let product of productArray">
         <ion-label>{{product.name}}</ion-label>
          <div item-content>
               Rate: {{product.rate}} Tax : {{product.tax}}
          </div>
         <button ion-button icon-only item-right (click)='editProduct(product)'>
            <ion-icon name="arrow-dropright"></ion-icon>
          </button>           
    </ion-item>
 </ion-list>

The product details do not show on the second line. It shows on the first line with details aligned to the right.

Upvotes: 2

Views: 688

Answers (1)

Mete Cantimur
Mete Cantimur

Reputation: 1401

Try this please:

<ion-list>
    <ion-item *ngFor="let product of productArray">
        <p>{{product.name}}</p>
        <p>
            Rate: {{product.rate}} Tax : {{product.tax}}
        </p>
        <button ion-button icon-only item-right (click)='editProduct(product)'>
            <ion-icon name="arrow-dropright"></ion-icon>
        </button>           
     </ion-item>
 </ion-list>

Upvotes: 1

Related Questions