DevExtreme Angular - Set the Initial Image

By default, the image that the Gallery widget displays initially is the first item of the data source. To specify another item to be initially displayed, assign its index in the dataSource to the selectedIndex option.

jQuery
JavaScript
$(function () {
    $("#galleryContainer").dxGallery({
        dataSource: [
            "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person2.png",
            "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person3.png"
        ],
        height: 300,
        selectedIndex: 2
    });
});
Angular
HTML
TypeScript
<dx-gallery
    [dataSource]="galleryDataSource"
    [height]="300"
    [selectedIndex]="2">
</dx-gallery>
import { DxGalleryModule } from "devextreme-angular";
// ...
export class AppComponent {
    galleryDataSource = [
        "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person1.png",
        "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person2.png",
        "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person3.png"
    ];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})

As an alternative, you can specify the initial image using its data source object. In this case, assign the object to the selectedItem option.

jQuery
JavaScript
var galleryData = [{
    imageAlt: "Maria",
    imageSrc: "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person1.png"
}, {
    imageAlt: "John",
    imageSrc: "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person2.png"
}, {
    imageAlt: "Xavier",
    imageSrc: "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person3.png"
}];

$(function () {
    $("#galleryContainer").dxGallery({
        dataSource: galleryData,
        height: 300,
        selectedItem: galleryData[1]
    });
});
Angular
HTML
TypeScript
<dx-gallery
    [dataSource]="galleryDataSource"
    [height]="300"
    [selectedItem]="selectedItem">
</dx-gallery>
import { DxGalleryModule } from "devextreme-angular";
// ...
export class AppComponent {
    galleryDataSource = [{
        imageAlt: "Maria",
        imageSrc: "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person1.png"
    }, {
        imageAlt: "John",
        imageSrc: "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person2.png"
    }, {
        imageAlt: "Xavier",
        imageSrc: "https://js.devexpress.com/Content/images/doc/18_2/PhoneJS/person3.png"
    }];
    selectedItem = this.galleryDataSource[1];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})
See Also