Angular MultiView - Switch Between Views

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

HTML
TypeScript
  • <dx-multi-view
  • [swipeEnabled]="false">
  • </dx-multi-view>
  • import { DxMultiViewModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxMultiViewModule
  • ],
  • // ...
  • })

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

HTML
TypeScript
  • <dx-multi-view
  • [dataSource]="multiViewItems"
  • [(selectedIndex)]="selectedIndex">
  • </dx-multi-view>
  • import { DxMultiViewModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • selectedIndex: number;
  •  
  • constructor() {
  • this.selectedIndex = 1;
  • }
  •  
  • changeSelectedIndex(itemIndex) {
  • this.selectedIndex = itemIndex;
  • }
  •  
  • multiViewItems = [
  • { text: 'Personal Data' },
  • { text: 'Contacts' }
  • ];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxMultiViewModule
  • ],
  • // ...
  • })

By default, the MultiView UI component animates switching between views. You can disable animation by setting the animationEnabled property to false.

HTML
TypeScript
  • <dx-multi-view
  • [animationEnabled]="false">
  • </dx-multi-view>
  • import { DxMultiViewModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxMultiViewModule
  • ],
  • // ...
  • })
See Also