DevExtreme Angular - Overview
The Popup widget is a pop-up window overlaying the current view.
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.
- <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
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Popup - Customize the Appearance
- Popup - Show and Hide the Popup
- Popup - Resize and Relocate
- Popup API Reference
If you have technical questions, please create a support ticket in the DevExpress Support Center.