Angular Gallery - Customize Item Appearance

Gallery items are not sctrictly images. They can contain text or other elements of your choice. For a minor customization of Gallery items, you can define specific fields in item data objects. For example, the following code generates two items: one is disabled and the other has a specified alt attribute.

HTML
TypeScript
  • <dx-gallery
  • [dataSource]="galleryDataSource"
  • [height]="300">
  • </dx-gallery>
  • import { DxGalleryModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • galleryDataSource = [{
  • imageSrc: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png",
  • disabled: true
  • }, {
  • imageSrc: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png",
  • imageAlt: "Peter"
  • }];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxGalleryModule
  • ],
  • // ...
  • })

If you need a more flexible solution, define an itemTemplate.

HTML
TypeScript
  • <dx-gallery
  • [dataSource]="galleryDataSource"
  • [height]="300"
  • itemTemplate="item">
  • <div *dxTemplate="let data of 'item'">
  • <p><b>Name</b>: <span>{{data.name}}</span></p>
  • <img src="{{data.path}}" alt="{{data.name}}" />
  • </div>
  • </dx-gallery>
  • import { DxGalleryModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • galleryDataSource = [
  • { path: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png", name: "Maria" },
  • { path: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png", name: "John" },
  • { path: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png", name: "Xavier" }
  • ];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxGalleryModule
  • ],
  • // ...
  • })

Built-In Template Engine Demo 3rd-Party Template Engine Demo

See Also