Modal Pop Up in angular using devextreme

On the internet, modal popups are frequently used to start newsletter signups, provide notifications and alerts, and manage registration and login forms.

Show and Hide the Popup :

Built-in close button
Enable the showCloseButton property to display the Close button in a Popup’s top toolbar.
Custom close button
This demo shows how to add custom buttons to a Popup. One of these buttons uses an onClick handler to set the popupVisible variable to false, causing the Popup to disappear. Refer to the next section (Configure the Popup) to learn how you can populate a popup with custom controls.
On outside click
Enable the hideOnOutsideClick property to allow users to hide the Popup by clicking outside the component.

Configuration of Pop Up :

Top toolbar
- Predefined
  Set showTitle to true and use the title property to specify the caption. The Close button will appear if you do not disable the showCloseButton property.
- Custom
  Add toolbarItems markup and set each item’s toolbar property to top. If you want to display an item in the overflow menu, as shown in this demo, set the item’s locateInMenu property to always. You can also assign never to this property to keep the item outside the overflow menu, or you can assign auto to hide the item in the menu if the Popup’s width decreases.
Content
To populate the Popup with content, add markup inside the component.

Bottom toolbar
To enable the bottom toolbar, declare toolbarItems in the markup as shown in this demo. Set each item’s toolbar property to bottom. To learn more about toolbar configuration, refer to the following tutorial: Getting Started with Toolbar

App.component.html

<div id="container">
  <h1>Employees</h1>
  <ul>
    <li *ngFor="let employee of employees">
      <img [src]="employee.Picture" [id]="'image' + employee.ID" /><br />
      <i>{{ employee.FirstName }} {{ employee.LastName }}</i
      ><br />
      <dx-button
        class="button-info"
        text="Details"
        (mouseenter)="detailsButtonMouseEnter(employee.ID)"
        (onClick)="showInfo(employee)"
      >
      </dx-button>
    </li>
  </ul>
  <dx-popup
    [width]="300"
    [height]="280"
    [showTitle]="true"
    title="Information"
    [dragEnabled]="false"
    [hideOnOutsideClick]="true"
    [showCloseButton]="false"
    container=".dx-viewport"
    [(visible)]="popupVisible"
  >
    <dxi-toolbar-item
      widget="dxButton"
      toolbar="top"
      locateInMenu="always"
      [options]="moreInfoButtonOptions"
    >
    </dxi-toolbar-item>
    <dxi-toolbar-item
      widget="dxButton"
      toolbar="bottom"
      location="before"
      [options]="emailButtonOptions"
    >
    </dxi-toolbar-item>
    <dxi-toolbar-item
      widget="dxButton"
      toolbar="bottom"
      location="after"
      [options]="closeButtonOptions"
    >
    </dxi-toolbar-item>
    <dxo-position at="bottom" my="center" [of]="positionOf" collision="fit">
    </dxo-position>
    <div *dxTemplate="let data of 'content'">
      <p>
        Full Name:
        <span
          >{{ currentEmployee.FirstName }} {{ currentEmployee.LastName }}</span
        >
      </p>
      <p>
        Birth Date:
        <span>{{ currentEmployee.BirthDate }}</span>
      </p>
      <p>
        Address:
        <span>{{ currentEmployee.Address }}</span>
      </p>
      <p>
        Hire Date:
        <span>{{ currentEmployee.HireDate }}</span>
      </p>
      <p>
        Position:
        <span>{{ currentEmployee.Position }}</span>
      </p>
    </div>
  </dx-popup>
</div>

app.component.ts

import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { DxPopupModule, DxButtonModule, DxTemplateModule } from 'devextreme-angular';
import notify from 'devextreme/ui/notify';
import { Employee, Service } from './app.service';

if (!/localhost/.test(document.location.host)) {
  enableProdMode();
}

@Component({
  selector: 'demo-app',
  templateUrl: 'app/app.component.html',
  styleUrls: ['app/app.component.css'],
  providers: [Service],
})

export class AppComponent {
  currentEmployee: Employee = new Employee();

  employees: Employee[];

  popupVisible = false;

  moreInfoButtonOptions: any;

  emailButtonOptions: any;

  closeButtonOptions: any;

  positionOf: string;

  constructor(service: Service) {
    const that = this;
    this.employees = service.getEmployees();
    this.moreInfoButtonOptions = {
      text: 'More info',
      onClick(e) {
        const message = `More info about ${that.currentEmployee.FirstName} ${that.currentEmployee.LastName}`;
        notify({
          message,
          position: {
            my: 'center top',
            at: 'center top',
          },
        }, 'success', 3000);
      },
    };
    this.emailButtonOptions = {
      icon: 'email',
      text: 'Send',
      onClick(e) {
        const message = `Email is sent to ${that.currentEmployee.FirstName} ${that.currentEmployee.LastName}`;
        notify({
          message,
          position: {
            my: 'center top',
            at: 'center top',
          },
        }, 'success', 3000);
      },
    };
    this.closeButtonOptions = {
      text: 'Close',
      onClick(e) {
        that.popupVisible = false;
      },
    };
  }

  detailsButtonMouseEnter(id) {
    this.positionOf = `#image${id}`;
  }

  showInfo(employee) {
    this.currentEmployee = employee;
    this.popupVisible = true;
  }
}

@NgModule({
  imports: [
    BrowserModule,
    DxPopupModule,
    DxButtonModule,
    DxTemplateModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})

export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Output :

Modal Pop Up in angular using devextreme

Sameer Palla

Submit a Comment Cancel reply

Subscribe