Angular LoadPanel - Overview

The LoadPanel is an overlay UI component notifying the viewer that loading is in progress.

View Demo

The following code adds to your page a simple LoadPanel and a Button that invokes it. The closeOnOutsideClick property set to true instructs the LoadPanel to hide once a user clicks outside it.

jQuery
HTML
JavaScript
<div id="loadPanelContainer"></div>
<div id="buttonContainer"></div>
$(function() {
    $("#loadPanelContainer").dxLoadPanel({
        closeOnOutsideClick: true
    });

    $("#buttonContainer").dxButton({
        text: "Show the Load Panel", 
        onClick: function () {
            $("#loadPanelContainer").dxLoadPanel("show");
        } 
    });
});
Angular
HTML
TypeScript
<dx-load-panel
    [closeOnOutsideClick]="true"
    [(visible)]="isLoadPanelVisible">
</dx-load-panel>
<dx-button
    text="Show the Load Panel"
    (onClick)="isLoadPanelVisible = true">
</dx-button>
import { DxLoadPanelModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    isLoadPanelVisible: boolean = false;
}
@NgModule({
    imports: [
        // ...
        DxLoadPanelModule,
        DxButtonModule
    ],
    // ...
})
Vue
<template>
    <div>
        <DxLoadPanel
            :close-on-outside-click="true"
            :visible.sync="isLoadPanelVisible"
        />
        <DxButton
            text="Show the Load Panel"
            @click="handleClick"
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxLoadPanel } from 'devextreme-vue/load-panel';
import { DxButton } from 'devextreme-vue/button';

export default {
    components: {
        DxLoadPanel,
        DxButton
    },
    data() {
        return {
            isLoadPanelVisible: false
        }
    },
    methods: {
        handleClick() {
            this.isLoadPanelVisible = true;
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { LoadPanel } from 'devextreme-react/load-panel';
import { Button } from 'devextreme-react/button';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isLoadPanelVisible: false
        };

        this.handleClick = this.handleClick.bind(this);
        this.handleHide = this.handleHide.bind(this);
    }

    handleClick() {
        this.setState({
            isLoadPanelVisible: true
        });
    }

    handleHide() {
        this.setState({
            isLoadPanelVisible: false
        });
    }

    render() {
        return (
            <div>
                <LoadPanel
                    closeOnOutsideClick={true}
                    visible={this.state.isLoadPanelVisible}
                    onHidden={this.handleHide}
                />
                <Button
                    text="Show the Load Panel"
                    onClick={this.handleClick}
                />
            </div>
        );
    }
}

export default App;
See Also