DevExtreme Angular - Overview

The LoadPanel is an overlay widget 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 option set to true instructs the LoadPanel to hide once a user clicks outside it.

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
  • ],
  • // ...
  • })
See Also