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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.