DevExtreme Angular - Switch Between Views

By default, an end user can switch between views by swiping. Assign false to the swipeEnabled option to disable this feature.

jQuery
JavaScript
$(function() {
    $("#multiViewContainer").dxMultiView({
        dataSource: multiViewItems,
        swipeEnabled: false
    });
});
Angular
HTML
TypeScript
<dx-multi-view
    [dataSource]="multiViewItems"
    [swipeEnabled]="false">
</dx-multi-view>
import { DxMultiViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    multiViewItems = [ ... ];
}
@NgModule({
    imports: [
        // ...
        DxMultiViewModule
    ],
    // ...
})

You can switch the views from code by changing the selectedIndex or selectedItem option.

jQuery
JavaScript
$("#multiViewContainer").dxMultiView("option", "selectedIndex", 1);
Angular
HTML
TypeScript
<dx-multi-view
    [dataSource]="multiViewItems"
    [(selectedIndex)]="selectedIndex">
</dx-multi-view>
import { DxMultiViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    multiViewItems = [ ... ];
    selectedIndex: number = 0;
}
@NgModule({
    imports: [
        // ...
        DxMultiViewModule
    ],
    // ...
})

By default, the MultiView widget animates switching between views. You can disable animation by setting the animationEnabled option to false.

jQuery
JavaScript
$(function() {
    $("#multiViewContainer").dxMultiView({
        dataSource: multiViewItems,
        animationEnabled: false
    });
});
Angular
HTML
TypeScript
<dx-multi-view
    [dataSource]="multiViewItems"
    [animationEnabled]="false">
</dx-multi-view>
import { DxMultiViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    multiViewItems = [ ... ];
}
@NgModule({
    imports: [
        // ...
        DxMultiViewModule
    ],
    // ...
})
See Also