DevExtreme Angular - Loop the Views

The MultiView widget can display views in a loop. The loop mode enables an end user to swipe through the last view to the first and vice versa. To enable this mode, assign true to the loop option.

jQuery
JavaScript
HTML
$(function() {
    $('#multiViewContainer').dxMultiView({
        dataSource: [
            { text: 'Personal Data' },
            { text: 'Contacts' }
        ],
        loop: true
    });
});
<div id="multiViewContainer"></div>
Angular
HTML
TypeScript
<dx-multi-view
    [dataSource]="multiViewItems"
    [loop]="true">
</dx-multi-view>
import { DxMultiViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    multiViewItems = [
        { text: 'Personal Data' },
        { text: 'Contacts' }
    ];
}
@NgModule({
    imports: [
        // ...
        DxMultiViewModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxMultiView
        :data-source="multiViewItems"
        :loop="true"
    />
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxMultiView from 'devextreme-vue/multi-view';

export default {
    components: {
        DxMultiView
    },
    data() {
        return {
            multiViewItems: [
                { text: 'Personal Data' },
                { text: 'Contacts' }
            ]
        };
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { MultiView } from 'devextreme-react/multi-view';

const multiViewItems = [
    { text: 'Personal Data' },
    { text: 'Contacts' }
];

class App extends React.Component {
    render() {
        return (
            <MultiView
                dataSource={multiViewItems}
                loop={true}
            />
        );
    }
}

export default App;
See Also