<div id="container">
<div class="header">Employees</div>
<ul>
@for (employee of employees; track employee.ID) {
<li>
<img
[id]="'image' + employee.ID"
[alt]="employee.FirstName + ' ' + employee.LastName"
[src]="employee.Picture"
/>
<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-popup-toolbar-item
widget="dxButton"
toolbar="top"
locateInMenu="always"
[options]="moreInfoButtonOptions"
>
</dxi-popup-toolbar-item>
<dxi-popup-toolbar-item
widget="dxButton"
toolbar="bottom"
location="before"
[options]="emailButtonOptions"
>
</dxi-popup-toolbar-item>
<dxi-popup-toolbar-item
widget="dxButton"
toolbar="bottom"
location="after"
[options]="closeButtonOptions"
>
</dxi-popup-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>
import { bootstrapApplication } from '@angular/platform-browser';
import {
ChangeDetectorRef, Component, enableProdMode, provideZoneChangeDetection,
} from '@angular/core';
import { DxPopupModule, DxButtonModule } 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.component.html',
styleUrls: ['./app.component.css'],
providers: [Service],
imports: [
DxPopupModule,
DxButtonModule,
],
})
export class AppComponent {
currentEmployee: Employee = new Employee();
employees: Employee[];
popupVisible = false;
moreInfoButtonOptions: Record<string, unknown>;
emailButtonOptions: Record<string, unknown>;
closeButtonOptions: Record<string, unknown>;
positionOf: string;
constructor(service: Service, private changeDetectorRef: ChangeDetectorRef) {
this.employees = service.getEmployees();
this.moreInfoButtonOptions = {
text: 'More info',
onClick: () => {
const message = `More info about ${this.currentEmployee.FirstName} ${this.currentEmployee.LastName}`;
notify({
message,
position: {
my: 'center top',
at: 'center top',
},
}, 'success', 3000);
},
};
this.emailButtonOptions = {
icon: 'email',
stylingMode: 'contained',
text: 'Send',
onClick: () => {
const message = `Email is sent to ${this.currentEmployee.FirstName} ${this.currentEmployee.LastName}`;
notify({
message,
position: {
my: 'center top',
at: 'center top',
},
}, 'success', 3000);
},
};
this.closeButtonOptions = {
text: 'Close',
stylingMode: 'outlined',
type: 'normal',
onClick: () => {
this.popupVisible = false;
this.changeDetectorRef.detectChanges();
},
};
}
detailsButtonMouseEnter(id: number) {
this.positionOf = `#image${id}`;
}
showInfo(employee: Employee) {
this.currentEmployee = employee;
this.popupVisible = true;
}
}
bootstrapApplication(AppComponent, {
providers: [
provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
],
});
::ng-deep .header {
font-size: 34px;
text-align: center;
}
::ng-deep #container {
padding: 10px;
}
::ng-deep #container ul {
list-style-type: none;
text-align: center;
}
::ng-deep #container ul li {
display: inline-block;
width: 160px;
margin: 10px;
}
::ng-deep #container ul li img {
width: 100px;
}
::ng-deep .button-info {
margin: 10px;
}
::ng-deep .dx-popup-content p {
margin-bottom: 10px;
margin-top: 0;
}
import { Injectable } from '@angular/core';
export class Employee {
ID: number;
FirstName: string;
LastName: string;
Prefix: string;
Position: string;
Picture: string;
BirthDate: string;
HireDate: string;
Notes: string;
Address: string;
}
const employees: Employee[] = [{
ID: 7,
FirstName: 'Sandra',
LastName: 'Johnson',
Prefix: 'Mrs.',
Position: 'Controller',
Picture: '../../../../images/employees/06.png',
BirthDate: '1974/11/15',
HireDate: '2005/05/11',
Notes: "Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you've not met her, be certain to say hi.\r\n\r\nSandra has 2 daughters both of whom are accomplished gymnasts.",
Address: '4600 N Virginia Rd.',
}, {
ID: 10,
FirstName: 'Kevin',
LastName: 'Carter',
Prefix: 'Mr.',
Position: 'Shipping Manager',
Picture: '../../../../images/employees/07.png',
BirthDate: '1978/01/09',
HireDate: '2009/08/11',
Notes: 'Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months.\r\n\r\nWhen not in the office, he is usually on the basketball court playing pick-up games.',
Address: '424 N Main St.',
}, {
ID: 11,
FirstName: 'Cynthia',
LastName: 'Stanwick',
Prefix: 'Ms.',
Position: 'HR Assistant',
Picture: '../../../../images/employees/08.png',
BirthDate: '1985/06/05',
HireDate: '2008/03/24',
Notes: 'Cindy joined us in 2008 and has been in the HR department for 2 years. \r\n\r\nShe was recently awarded employee of the month. Way to go Cindy!',
Address: '2211 Bonita Dr.',
}, {
ID: 30,
FirstName: 'Kent',
LastName: 'Samuelson',
Prefix: 'Dr.',
Position: 'Ombudsman',
Picture: '../../../../images/employees/02.png',
BirthDate: '1972/09/11',
HireDate: '2009/04/22',
Notes: 'As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field. He is a classically trained musician and is a member of the Chamber Orchestra.',
Address: '12100 Mora Dr',
}];
@Injectable()
export class Service {
getEmployees(): Employee[] {
return employees;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script>
<script src="./bundle.js" type="module"></script>
</body>
</html>