DevExtreme Angular - Customize the Content

By default, the Popup is displayed in a windowed mode. To show it full-screen, assign true to the fullScreen option.

JavaScript
  • $(function() {
  • $("#popupContainer").dxPopup({
  • title: "Popup Title",
  • visible: true,
  • fullScreen: true
  • });
  • });

To define the Popup content, specify a template for it. You can simply put this template inside the Popup container...

HTML
  • <div id="popupContainer">
  • <p>Popup content</p>
  • </div>

... or you can combine the HTML markup for the template in the contentTemplate function. Note that this function will be called only once - when the Popup appears for the first time.

JavaScript
  • $(function() {
  • $("#popupContainer").dxPopup({
  • title: "Popup Title",
  • contentTemplate: function () {
  • return $("<div />")
  • .dxButton({
  • text: 'Click me',
  • onClick: function () {
  • // ...
  • }
  • });
  • }
  • });
  • });

If you need to render different templates depending on a specific condition, define them inside the Popup container using the DevExtreme dxTemplate markup component. To switch the templates on-the-fly, change the value of the contentTemplate option.

HTML
JavaScript
  • <div id="buttonContainer"></div>
  • <div id="popupContainer">
  • <div data-options="dxTemplate: { name: 'template1' }">
  • <p>First template</p>
  • </div>
  • <div data-options="dxTemplate: { name: 'template2' }">
  • <p>Second template</p>
  • </div>
  • </div>
  • $(function() {
  • var popup = $("#popupContainer").dxPopup({
  • title: "Popup Title",
  • contentTemplate: 'template1'
  • }).dxPopup("instance");
  •  
  • $("#buttonContainer").dxButton({
  • text: "Change the Template",
  • onClick: function (e) {
  • if (popup.option("contentTemplate") == "template1") {
  • popup.option("contentTemplate", "template2");
  • } else {
  • popup.option("contentTemplate", "template1");
  • }
  • popup.show();
  • }
  • });
  • });
See Also