Angular Popup - Customize the Content

Specifying the Content Template

The example below shows how to create a template consisting of static (text) and dynamic (the Button UI component) content.

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

Switching Templates On the Fly

If you need to render different templates depending on a specific condition, define them inside the Popup container using the DevExtreme dxTemplate markup component. You can switch the templates on the fly by changing the contentTemplate property's value.

HTML
TypeScript
  • <dx-button
  • text="Change the Template"
  • (onClick)="changeTemplate()">
  • </dx-button>
  • <dx-popup
  • title="Popup Title"
  • [(visible)]="isPopupVisible"
  • [contentTemplate]="currentTemplate">
  • <div *dxTemplate="let data of 'template1'">
  • <p>First template</p>
  • </div>
  • <div *dxTemplate="let data of 'template2'">
  • <p>Second template</p>
  • </div>
  • </dx-popup>
  • import { DxPopupModule, DxButtonModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • currentTemplate: string = "template1";
  • isPopupVisible: boolean = true;
  • changeTemplate () {
  • this.currentTemplate = (this.currentTemplate == "template1" ? "template2" : "template1");
  • this.isPopupVisible = true;
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxPopupModule,
  • DxButtonModule
  • ],
  • // ...
  • })
See Also

Add Scrolling

The Popup component always displays a native scrollbar when the height of the Popup's content is greater than that of the Popup.

You can also implement a scrollbar that belongs to the ScrollView component. This implementation is more flexible. For example, you can enable right-to-left representation or scroll the content to a specific position. For more information about the available options, refer to the ScrollView API section.

To implement this solution, follow the steps below:

  1. Wrap the content in the ScrollView component and place it in the Popup container.

  2. Set the height and width of the ScrollView to 100% of the popup content area.

app.component.html
  • <dx-popup ... >
  • <div *dxTemplate="let data of 'content'">
  • <dx-scroll-view
  • width="100%"
  • height="100%">
  • <!-- ... -->
  • </dx-scroll-view>
  • </div>
  • </dx-popup>
  • <!-- ... -->