1. Home
  2. Forum
  3. Ionic
  4. How to display the product list with their images in listview

How to display the product list with their images in listview

Hello!
I am working on an eCommerce project in which I want to display the product list with their perspective images in list view

2 Replies 1 reply marked as answer
MK Muthukrishnan Kandasamy Syncfusion Team December 18, 2020 10:02 AM UTC

 
Hi Ishan, 
 
Thanks for contacting Syncfusion support. 
 
We can show the products list with image by using EJ ListView control. We can use the custom template for achieving this requirement. Please refer to the below code block. 
 
[Index.html] 
 
<body ng-app="starter"> 
    <ion-pane> 
        <ion-header-bar class="bar-stable"> 
          <h1 class="title">Ionic - Teste DataBase</h1> 
        </ion-header-bar> 
             <ion-content ng-controller="ListController"> 
            <div class="angularbind ioncenter"> 
                <div ej-listview id="anglistview" e-datasource="datalist" e-width="400" style="margin:0 auto" e-databinding="true" e-rendertemplate="true" e-showheader="false" e-allowscrolling="false"> 
                    <div class="cont-bg"> 
                        <div class="{{>Class}}"> 
                        </div> 
                        <div class="listrightdiv"> 
                            <span class="templatetext">{{>Name}}</span> <span class="designationstyle">{{>Designation}}</span> 
                            <div class="aboutstyle"> 
                                {{>About}} 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </ion-content> 
        <ion-list> 
 
        </ion-list> 
    </ion-pane> 
</body> 
 
 
[app.js] 
 
example.controller("ListController", function($scope, $rootScope) { 
  $scope.datalist = [ 
    { "Name": "Brooke", "Class": "brooke", "Designation": "HR Assistant", "About": "Brooke provides administrative support to the HR office." }, 
  { "Name": "Claire", "Class": "claire", "Designation": "HR Manager", "About": "Claire is responsible for strategic HR planning and budget." }, 
  { "Name": "Erik", "Class": "erik", "Designation": "Training Specialist", "About": "Erik notifies attendees and manages follow up." }, 
  { "Name": "Grace", "Class": "grace", "Designation": "Development Manager", "About": "Grace maintains training plans to achive workforce skill." }, 
  { "Name": "Jacob", "Class": "jacob", "Designation": "Recruitment Manager", "About": "Jacob manages recruitment and prepares key staffing metrics." }]; 
}); 
 
 
 
We have prepared sample application for your convenience, which can be downloaded from the below link. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 



Marked as answer
EV Eugene Vega August 1, 2026 08:00 PM UTC

Thank you for sharing this detailed solution, Muthukrishnan. The custom template approach in the EJ ListView control is exactly what I was looking for to display product images alongside the product details.

I was actually exploring similar UI patterns recently and came across a website that does a great job with this type of product listing. They showcase their items in a clean list view with beautiful images. If you're looking for some design inspiration, I highly recommend checking out their collection of gemstones bracelets, the layout is clean, responsive, and visually appealing.

Thanks again for the sample code and the links. I'll download the sample and test it out in my project.

Regards,
Ishan


Loader.
Up arrow icon