Angular Gallery - Item Template

This demo show how you can apply a custom template to items in the Gallery component.

Backend API

<dx-gallery [dataSource]="dataSource" [height]="440" width="100%" [loop]="true" [showIndicator]="false" > <div *dxTemplate="let galleryItem of 'item'"> <div> <img alt="{{ galleryItem.Address }}" src="{{ galleryItem.Image }}" /> <div class="item-price">{{ galleryItem.Price | currency : "USD" : "symbol" : "1.0" }}</div> <div class="item-address" >{{ galleryItem.Address + ", " + galleryItem.City + ", " + galleryItem.State }} </div> </div> </div> </dx-gallery>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { CurrencyPipe } from '@angular/common'; import { DxGalleryModule } from 'devextreme-angular'; import { Service, House } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxGalleryModule, CurrencyPipe, ], }) export class AppComponent { dataSource: House[]; constructor(service: Service) { this.dataSource = service.getHouses(); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep .dx-gallery-item { width: 500px; max-width: 100%; } ::ng-deep .dx-gallery-item img { height: 300px; width: 450px; max-width: 100%; } ::ng-deep .dx-gallery-item .item-price { font-size: 20px; font-weight: bold; }

import { Injectable } from '@angular/core'; export class House { ID: number; Address: string; City: string; State: string; ZipCode: string; Price: number; Image: string; } const houses: House[] = [{ ID: 1, Address: '652 Avonwick Gate', City: 'Toronto', State: 'ON', ZipCode: 'M3A25', Price: 780000, Image: '../../../../images/gallery/1.jpg', }, { ID: 2, Address: '82649 Topeka St', City: 'Riverbank', State: 'CA', ZipCode: '95360', Price: 1750000, Image: '../../../../images/gallery/2.jpg', }, { ID: 3, Address: '328 S Kerema Ave', City: 'Milford', State: 'CT', ZipCode: '06465', Price: 350000, Image: '../../../../images/gallery/3.jpg', }, { ID: 4, Address: '5119 Beryl Dr', City: 'San Antonio', State: 'TX', ZipCode: '78212', Price: 455000, Image: '../../../../images/gallery/4.jpg', }, { ID: 5, Address: '61207 16th St N', City: 'Moorhead', State: 'MN', ZipCode: '56564', Price: 1700000, Image: '../../../../images/gallery/5.jpg', }, { ID: 6, Address: '8512 Tanglewood Cir', City: 'Reform', State: 'AL', ZipCode: '35487', Price: 250000, Image: '../../../../images/gallery/6.jpg', }, { ID: 7, Address: '7121 Bailey St', City: 'Worcester', State: 'MA', ZipCode: '01605', Price: 555000, Image: '../../../../images/gallery/7.jpg', }, { ID: 8, Address: '620201 Plymouth Rd', City: 'Detroit', State: 'MI', ZipCode: ' 48224', Price: 610000, Image: '../../../../images/gallery/8.jpg', }, { ID: 9, Address: '1198 Theresa Cir', City: 'Whitinsville', State: 'MA', ZipCode: '01582', Price: 320000, Image: '../../../../images/gallery/9.jpg', }]; @Injectable() export class Service { getHouses() { return houses; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>