Specifying the Content Template
The example below shows how to create a template consisting of static (text) and dynamic (the Button UI component) content.
- <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.
- <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:
Wrap the content in the ScrollView component and place it in the Popup container.
Set the height and width of the ScrollView to
100%
of the popup content area.
- <dx-popup ... >
- <div *dxTemplate="let data of 'content'">
- <dx-scroll-view
- width="100%"
- height="100%">
- <!-- ... -->
- </dx-scroll-view>
- </div>
- </dx-popup>
- <!-- ... -->
If you have technical questions, please create a support ticket in the DevExpress Support Center.