DevExtreme Angular - Overview

The Popup widget is a pop-up window overlaying the current view.

View Demo

The following code adds a simple Popup to your page, along with a Button that invokes it. The simplest configuration of the Popup requires the content and title to be specified.

HTML
TypeScript
  • <dx-popup
  • title="Popup Title"
  • [(visible)]="isPopupVisible">
  • <div *dxTemplate="let data of 'content'">
  • <p>Popup content</p>
  • </div>
  • </dx-popup>
  • <dx-button
  • text="Show the Popup"
  • (onClick)="isPopupVisible = true">
  • </dx-button>
  • import { DxPopupModule, DxButtonModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • isPopupVisible: boolean = false;
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxPopupModule,
  • DxButtonModule
  • ],
  • // ...
  • })

There are several ways to specify the content of the Popup. Learn more in the Customize the Content article. The Popup can also be displayed with a toolbar. For detailed information, see the Specify Toolbar Items topic.

See Also