Angular Popup - Customize the Content

Specifying the Content Template

The template implementation depends on the used framework or library. Examples of jQuery, Angular, and ASP.NET MVC are presented below. They show how to create a template consisting of static (text) and dynamic (the Button UI component) content.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Popup } from 'devextreme-react/popup';
  • import { Button } from 'devextreme-react/button';
  •  
  • const renderContent = () => {
  • return (
  • <p>Static content</p>
  • <Button
  • text="Click me"
  • onClick={buttonClick}
  • />
  • );
  • }
  •  
  • const buttonClick = () => {
  • // ...
  • }
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  •  
  • this.state = {
  • isPopupVisible: true
  • };
  •  
  • this.onHiding = this.onHiding.bind(this);
  • }
  •  
  • onHiding() {
  • this.setState({
  • isPopupVisible: false
  • });
  • }
  •  
  • render() {
  • return (
  • <Popup
  • visible={this.state.isPopupVisible}
  • title="Popup Title"
  • contentRender={renderContent}
  • onHiding={this.onHiding}
  • />
  • );
  • }
  • }
  •  
  • export default App;

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.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Popup } from 'devextreme-react/popup';
  • import { Button } from 'devextreme-react/button';
  •  
  • const firstTemplate = () => {
  • return (
  • <p>First template</p>
  • );
  • }
  •  
  • const secondTemplate = () => {
  • return (
  • <p>Second template</p>
  • );
  • }
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  •  
  • this.state = {
  • isPopupVisible: true,
  • renderContent: firstTemplate
  • };
  •  
  • this.changeTemplate = this.changeTemplate.bind(this);
  • this.onHiding = this.onHiding.bind(this);
  • }
  •  
  • changeTemplate() {
  • this.setState({
  • renderContent: this.state.renderContent === firstTemplate ? secondTemplate : firstTemplate
  • });
  • }
  •  
  • onHiding() {
  • this.setState({
  • isPopupVisible: false
  • });
  • }
  •  
  • render() {
  • return (
  • <div>
  • <Popup
  • title="Popup Title"
  • visible={this.state.isPopupVisible}
  • onHiding={this.onHiding}
  • contentRender={this.state.renderContent}
  • />
  • <Button
  • text="Change the Template"
  • onClick={this.changeTemplate}
  • />
  • </div>
  • );
  • }
  • }
  •  
  • export default App;
See Also