From ab737ec55bd61fbea7e7d9a66d392a1e6a1c8a65 Mon Sep 17 00:00:00 2001
From: sergey arzamasov <sergei.arzamasov@gmail.com>
Date: Wed, 4 Dec 2024 11:24:55 +0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=B9=20Pagination:=20Create=20Overview?=
 =?UTF-8?q?=20demo=20page.=20(Angular)=20(#28490)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Sergey Arzamasov <sergey.arzamasov@devexpress.com>
---
 .../Overview/Angular/app/app.component.css    | 100 ++++
 .../Overview/Angular/app/app.component.html   |  29 +-
 .../Overview/Angular/app/app.component.ts     |  44 +-
 .../Overview/Angular/app/app.service.ts       | 552 +++++++++++++-----
 .../employee-card.component.html              |  21 +
 .../employee-card/employee-card.component.ts  |  16 +
 .../Pagination/Overview/Angular/index.html    |   2 +-
 7 files changed, 616 insertions(+), 148 deletions(-)
 create mode 100644 apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css
 create mode 100644 apps/demos/Demos/Pagination/Overview/Angular/app/employee-card/employee-card.component.html
 create mode 100644 apps/demos/Demos/Pagination/Overview/Angular/app/employee-card/employee-card.component.ts

diff --git a/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css
new file mode 100644
index 000000000000..f65579fc60ad
--- /dev/null
+++ b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css
@@ -0,0 +1,100 @@
+body {
+  overflow-x: hidden;
+}
+
+.demo-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.container {
+  min-width: 720px;
+  width: 100%;
+}
+
+::ng-deep .employees {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  min-height: 644px;
+  padding-bottom: 24px;
+}
+
+::ng-deep employee-card {
+  width: 100%;
+  max-height: 312px;
+  align-self: stretch;
+  overflow: hidden;
+  border: var(--dx-border-width) solid var(--dx-color-border);
+  border-radius: var(--dx-border-radius);
+  background-color: var(--dx-component-color-bg);
+}
+
+::ng-deep .employees.employees--forth employee-card {
+  min-width: 250px;
+  width: 390px;
+  flex-basis: calc(50% - 10px);
+}
+
+::ng-deep .employees.employees--six employee-card {
+  flex-basis: calc(33.3% - 12.5px);
+}
+
+::ng-deep .employees__img-wrapper {
+  height: 180px;
+  position: relative;
+  overflow: hidden;
+  border-bottom: var(--dx-border-width) solid var(--dx-color-border);
+  background-color: #fff;
+}
+
+::ng-deep .employees__img {
+  display: block;
+  height: 220px;
+  position: absolute;
+  content: "";
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+::ng-deep .employees__info {
+  padding: 24px;
+}
+
+::ng-deep .employees__info-row {
+  margin-bottom: 8px;
+  text-wrap: nowrap;
+}
+
+::ng-deep .employees__info-label {
+  display: inline-block;
+  font-weight: 600;
+  vertical-align: middle;
+}
+
+::ng-deep .employees.employees--forth .employees__info-label {
+  width: 160px;
+}
+
+::ng-deep .employees.employees--six .employees__info-label {
+  width: 80px;
+}
+
+::ng-deep .employees__info-value {
+  display: inline-block;
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  overflow: hidden;
+  white-space:nowrap
+}
+
+::ng-deep .employees.employees--forth .employees__info-value {
+  max-width: 180px;
+}
+
+::ng-deep .employees.employees--six .employees__info-value {
+  max-width: 120px;
+}
diff --git a/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.html b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.html
index ddc4ed8f5862..175a0142f5e6 100644
--- a/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.html
+++ b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.html
@@ -1,7 +1,22 @@
-<dx-data-grid
-  id="gridContainer"
-  [dataSource]="customers"
-  [columns]="['CompanyName', 'City', 'State', 'Phone', 'Fax']"
-  [showBorders]="true"
->
-</dx-data-grid>
+<div class="container">
+  <div
+    class="employees"
+    [ngClass]="pageSize === 4 ? 'employees--forth' : 'employees--six'"
+  >
+    @for (employee of pageEmployees; track employee.ID) {
+    <employee-card [employee]="employee"></employee-card>
+    }
+  </div>
+
+  <dx-pagination
+    [showInfo]="showInfo"
+    [showNavigationButtons]="showNavigationButtons"
+    [allowedPageSizes]="allowedPageSizes"
+    [itemCount]="itemCount"
+    [pageIndex]="pageIndex"
+    [pageSize]="pageSize"
+    (pageIndexChange)="onPageIndexChange($event)"
+    (pageSizeChange)="onPageSizeChange($event)"
+  >
+  </dx-pagination>
+</div>
diff --git a/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.ts
index 7ea2d957c548..125f11487eca 100644
--- a/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.ts
@@ -1,8 +1,9 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxDataGridModule } from 'devextreme-angular';
-import { Customer, Service } from './app.service';
+import { DxPaginationModule } from 'devextreme-angular';
+import { Employee, Service } from './app.service';
+import { EmployeeCard } from './employee-card/employee-card.component';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -17,22 +18,53 @@ if (window && window.config.packageConfigPaths) {
 @Component({
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
+  styleUrls: [`.${modulePrefix}/app.component.css`],
   providers: [Service],
 })
 export class AppComponent {
-  customers: Customer[];
+  employees: Employee[];
+
+  pageEmployees: Employee[];
+
+  itemCount: number;
+
+  readonly allowedPageSizes = [4, 6];
+
+  showInfo = true;
+
+  showNavigationButtons = true;
+
+  pageIndex = 1;
+  
+  pageSize = 4;
+
+  onPageIndexChange(val) {
+    this.pageIndex = val;
+    this.setPageEmployees();
+  }
+
+  onPageSizeChange(val) {
+    this.pageSize = val;
+    this.setPageEmployees();
+  }
+
+  setPageEmployees() {
+    this.pageEmployees = this.employees.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize);
+  }
 
   constructor(service: Service) {
-    this.customers = service.getCustomers();
+    this.employees = service.getEmployees();
+    this.itemCount = this.employees.length;
+    this.setPageEmployees();
   }
 }
 
 @NgModule({
   imports: [
     BrowserModule,
-    DxDataGridModule,
+    DxPaginationModule,
   ],
-  declarations: [AppComponent],
+  declarations: [AppComponent, EmployeeCard],
   bootstrap: [AppComponent],
 })
 export class AppModule { }
diff --git a/apps/demos/Demos/Pagination/Overview/Angular/app/app.service.ts b/apps/demos/Demos/Pagination/Overview/Angular/app/app.service.ts
index db238661893a..32d2a4fbb35d 100644
--- a/apps/demos/Demos/Pagination/Overview/Angular/app/app.service.ts
+++ b/apps/demos/Demos/Pagination/Overview/Angular/app/app.service.ts
@@ -1,150 +1,434 @@
 import { Injectable } from '@angular/core';
 
-export class Customer {
+export class Employee {
   ID: number;
 
-  CompanyName: string;
+  FullName: string;
 
-  Address: string;
+  Title: string;
 
-  City: string;
+  Employee_Picture: string;
 
-  State: string;
+  Picture: string;
 
-  Zipcode: number;
+  MobilePhone: string;
 
-  Phone: string;
-
-  Fax: string;
-
-  Website: string;
 }
 
-let customers: Customer[] = [{
-  ID: 1,
-  CompanyName: 'Super Mart of the West',
-  Address: '702 SW 8th Street',
-  City: 'Bentonville',
-  State: 'Arkansas',
-  Zipcode: 72716,
-  Phone: '(800) 555-2797',
-  Fax: '(800) 555-2171',
-  Website: 'http://www.nowebsitesupermart.dx',
-}, {
-  ID: 2,
-  CompanyName: 'Electronics Depot',
-  Address: '2455 Paces Ferry Road NW',
-  City: 'Atlanta',
-  State: 'Georgia',
-  Zipcode: 30339,
-  Phone: '(800) 595-3232',
-  Fax: '(800) 595-3231',
-  Website: 'http://www.nowebsitedepot.dx',
-}, {
-  ID: 3,
-  CompanyName: 'K&S Music',
-  Address: '1000 Nicllet Mall',
-  City: 'Minneapolis',
-  State: 'Minnesota',
-  Zipcode: 55403,
-  Phone: '(612) 304-6073',
-  Fax: '(612) 304-6074',
-  Website: 'http://www.nowebsitemusic.dx',
-}, {
-  ID: 4,
-  CompanyName: "Tom's Club",
-  Address: '999 Lake Drive',
-  City: 'Issaquah',
-  State: 'Washington',
-  Zipcode: 98027,
-  Phone: '(800) 955-2292',
-  Fax: '(800) 955-2293',
-  Website: 'http://www.nowebsitetomsclub.dx',
-}, {
-  ID: 5,
-  CompanyName: 'E-Mart',
-  Address: '3333 Beverly Rd',
-  City: 'Hoffman Estates',
-  State: 'Illinois',
-  Zipcode: 60179,
-  Phone: '(847) 286-2500',
-  Fax: '(847) 286-2501',
-  Website: 'http://www.nowebsiteemart.dx',
-}, {
-  ID: 6,
-  CompanyName: 'Walters',
-  Address: '200 Wilmot Rd',
-  City: 'Deerfield',
-  State: 'Illinois',
-  Zipcode: 60015,
-  Phone: '(847) 940-2500',
-  Fax: '(847) 940-2501',
-  Website: 'http://www.nowebsitewalters.dx',
-}, {
-  ID: 7,
-  CompanyName: 'StereoShack',
-  Address: '400 Commerce S',
-  City: 'Fort Worth',
-  State: 'Texas',
-  Zipcode: 76102,
-  Phone: '(817) 820-0741',
-  Fax: '(817) 820-0742',
-  Website: 'http://www.nowebsiteshack.dx',
-}, {
-  ID: 8,
-  CompanyName: 'Circuit Town',
-  Address: '2200 Kensington Court',
-  City: 'Oak Brook',
-  State: 'Illinois',
-  Zipcode: 60523,
-  Phone: '(800) 955-2929',
-  Fax: '(800) 955-9392',
-  Website: 'http://www.nowebsitecircuittown.dx',
-}, {
-  ID: 9,
-  CompanyName: 'Premier Buy',
-  Address: '7601 Penn Avenue South',
-  City: 'Richfield',
-  State: 'Minnesota',
-  Zipcode: 55423,
-  Phone: '(612) 291-1000',
-  Fax: '(612) 291-2001',
-  Website: 'http://www.nowebsitepremierbuy.dx',
-}, {
-  ID: 10,
-  CompanyName: 'ElectrixMax',
-  Address: '263 Shuman Blvd',
-  City: 'Naperville',
-  State: 'Illinois',
-  Zipcode: 60563,
-  Phone: '(630) 438-7800',
-  Fax: '(630) 438-7801',
-  Website: 'http://www.nowebsiteelectrixmax.dx',
-}, {
-  ID: 11,
-  CompanyName: 'Video Emporium',
-  Address: '1201 Elm Street',
-  City: 'Dallas',
-  State: 'Texas',
-  Zipcode: 75270,
-  Phone: '(214) 854-3000',
-  Fax: '(214) 854-3001',
-  Website: 'http://www.nowebsitevideoemporium.dx',
-}, {
-  ID: 12,
-  CompanyName: 'Screen Shop',
-  Address: '1000 Lowes Blvd',
-  City: 'Mooresville',
-  State: 'North Carolina',
-  Zipcode: 28117,
-  Phone: '(800) 445-6937',
-  Fax: '(800) 445-6938',
-  Website: 'http://www.nowebsitescreenshop.dx',
-}];
+const employees: Employee[] = [
+  {
+    ID: 1,
+    FullName: 'John Heart',
+    Title: 'CEO',
+    Employee_Picture: '01.png',
+    Picture: '../../../../images/employees/01.png',
+    MobilePhone: '2135559392',
+  },
+  {
+    ID: 2,
+    FullName: 'Samantha Bright',
+    Title: 'COO',
+    Employee_Picture: '30.png',
+    Picture: '../../../../images/employees/30.png',
+    MobilePhone: '2135552858',
+  },
+  {
+    ID: 3,
+    FullName: 'Arthur Miller',
+    Title: 'CTO',
+    Employee_Picture: '10.png',
+    Picture: '../../../../images/employees/10.png',
+    MobilePhone: '3105558583',
+  },
+  {
+    ID: 4,
+    FullName: 'Robert Reagan',
+    Title: 'CMO',
+    Employee_Picture: '03.png',
+    Picture: '../../../../images/employees/03.png',
+    MobilePhone: '8185552387',
+  },
+  {
+    ID: 5,
+    FullName: 'Greta Sims',
+    Title: 'HR Manager',
+    Employee_Picture: '04.png',
+    Picture: '../../../../images/employees/04.png',
+    MobilePhone: '8185556546',
+  },
+  {
+    ID: 6,
+    FullName: 'Brett Wade',
+    Title: 'IT Manager',
+    Employee_Picture: '05.png',
+    Picture: '../../../../images/employees/05.png',
+    MobilePhone: '6265550358',
+  },
+  {
+    ID: 7,
+    FullName: 'Sandra Johnson',
+    Title: 'Controller',
+    Employee_Picture: '06.png',
+    Picture: '../../../../images/employees/06.png',
+    MobilePhone: '5625552082',
+  },
+  {
+    ID: 8,
+    FullName: 'Ed Holmes',
+    Title: 'Sales Manager',
+    Employee_Picture: '11.png',
+    Picture: '../../../../images/employees/11.png',
+    MobilePhone: '3105551288',
+  },
+  {
+    ID: 9,
+    FullName: 'Barb Banks',
+    Title: 'Support Manager',
+    Employee_Picture: '20.png',
+    Picture: '../../../../images/employees/20.png',
+    MobilePhone: '3105553355',
+  },
+  {
+    ID: 10,
+    FullName: 'Kevin Carter',
+    Title: 'Shipping Manager',
+    Employee_Picture: '07.png',
+    Picture: '../../../../images/employees/07.png',
+    MobilePhone: '2135552840',
+  },
+  {
+    ID: 11,
+    FullName: 'Cindy Stanwick',
+    Title: 'HR Assistant',
+    Employee_Picture: '08.png',
+    Picture: '../../../../images/employees/08.png',
+    MobilePhone: '8185556655',
+  },
+  {
+    ID: 12,
+    FullName: 'Sammy Hill',
+    Title: 'Sales Assistant',
+    Employee_Picture: '12.png',
+    Picture: '../../../../images/employees/12.png',
+    MobilePhone: '6265557292',
+  },
+  {
+    ID: 13,
+    FullName: 'Davey Jones',
+    Title: 'Shipping Assistant',
+    Employee_Picture: '13.png',
+    Picture: '../../../../images/employees/13.png',
+    MobilePhone: '6265550281',
+  },
+  {
+    ID: 14,
+    FullName: 'Victor Norris',
+    Title: 'Shipping Assistant',
+    Employee_Picture: '14.png',
+    Picture: '../../../../images/employees/14.png',
+    MobilePhone: '2135559278',
+  },
+  {
+    ID: 15,
+    FullName: 'Mary Stern',
+    Title: 'Shipping Assistant',
+    Employee_Picture: '15.png',
+    Picture: '../../../../images/employees/15.png',
+    MobilePhone: '8185557857',
+  },
+  {
+    ID: 16,
+    FullName: 'Robin Cosworth',
+    Title: 'Shipping Assistant',
+    Employee_Picture: '16.png',
+    Picture: '../../../../images/employees/16.png',
+    MobilePhone: '8185550942',
+  },
+  {
+    ID: 17,
+    FullName: 'Kelly Rodriguez',
+    Title: 'Support Assistant',
+    Employee_Picture: '17.png',
+    Picture: '../../../../images/employees/17.png',
+    MobilePhone: '8185559248',
+  },
+  {
+    ID: 18,
+    FullName: 'James Anderson',
+    Title: 'Support Assistant',
+    Employee_Picture: '18.png',
+    Picture: '../../../../images/employees/18.png',
+    MobilePhone: '3235554702',
+  },
+  {
+    ID: 19,
+    FullName: 'Antony Remmen',
+    Title: 'Support Assistant',
+    Employee_Picture: '19.png',
+    Picture: '../../../../images/employees/19.png',
+    MobilePhone: '3105556625',
+  },
+  {
+    ID: 20,
+    FullName: 'Olivia Peyton',
+    Title: 'Sales Assistant',
+    Employee_Picture: '09.png',
+    Picture: '../../../../images/employees/09.png',
+    MobilePhone: '3105552728',
+  },
+  {
+    ID: 21,
+    FullName: 'Taylor Riley',
+    Title: 'Network Admin',
+    Employee_Picture: '21.png',
+    Picture: '../../../../images/employees/21.png',
+    MobilePhone: '3105557276',
+  },
+  {
+    ID: 22,
+    FullName: 'Amelia Harper',
+    Title: 'Network Admin',
+    Employee_Picture: '22.png',
+    Picture: '../../../../images/employees/22.png',
+    MobilePhone: '2135554276',
+  },
+  {
+    ID: 23,
+    FullName: 'Wally Hobbs',
+    Title: 'Programmer',
+    Employee_Picture: '23.png',
+    Picture: '../../../../images/employees/23.png',
+    MobilePhone: '8185558872',
+  },
+  {
+    ID: 24,
+    FullName: 'Brad Jameson',
+    Title: 'Programmer',
+    Employee_Picture: '24.png',
+    Picture: '../../../../images/employees/24.png',
+    MobilePhone: '8185554646',
+  },
+  {
+    ID: 25,
+    FullName: 'Karen Goodson',
+    Title: 'Programmer',
+    Employee_Picture: '25.png',
+    Picture: '../../../../images/employees/25.png',
+    MobilePhone: '6265550908',
+  },
+  {
+    ID: 26,
+    FullName: 'Marcus Orbison',
+    Title: 'Travel Coordinator',
+    Employee_Picture: '26.png',
+    Picture: '../../../../images/employees/26.png',
+    MobilePhone: '2135557098',
+  },
+  {
+    ID: 27,
+    FullName: 'Sandy Bright',
+    Title: 'Benefits Coordinator',
+    Employee_Picture: '27.png',
+    Picture: '../../../../images/employees/27.png',
+    MobilePhone: '8185550524',
+  },
+  {
+    ID: 28,
+    FullName: 'Morgan Kennedy',
+    Title: 'Graphic Designer',
+    Employee_Picture: '28.png',
+    Picture: '../../../../images/employees/28.png',
+    MobilePhone: '8185558238',
+  },
+  {
+    ID: 29,
+    FullName: 'Violet Bailey',
+    Title: 'Jr Graphic Designer',
+    Employee_Picture: '29.png',
+    Picture: '../../../../images/employees/29.png',
+    MobilePhone: '8185552478',
+  },
+  {
+    ID: 30,
+    FullName: 'Ken Samuelson',
+    Title: 'Ombudsman',
+    Employee_Picture: '02.png',
+    Picture: '../../../../images/employees/02.png',
+    MobilePhone: '5625559282',
+  },
+  {
+    ID: 31,
+    FullName: 'Nat Maguiree',
+    Title: 'Trainer',
+    Employee_Picture: '31.png',
+    Picture: '../../../../images/employees/31.png',
+    MobilePhone: '5625558377',
+  },
+  {
+    ID: 32,
+    FullName: 'Bart Arnaz',
+    Title: 'Director of Engineering',
+    Employee_Picture: '32.png',
+    Picture: '../../../../images/employees/32.png',
+    MobilePhone: '7145552000',
+  },
+  {
+    ID: 33,
+    FullName: 'Leah Simpson',
+    Title: 'Test Coordinator',
+    Employee_Picture: '33.png',
+    Picture: '../../../../images/employees/33.png',
+    MobilePhone: '5625595830',
+  },
+  {
+    ID: 34,
+    FullName: 'Arnie Schwartz',
+    Title: 'Engineer',
+    Employee_Picture: '34.png',
+    Picture: '../../../../images/employees/34.png',
+    MobilePhone: '7145558882',
+  },
+  {
+    ID: 35,
+    FullName: 'Billy Zimmer',
+    Title: 'Engineer',
+    Employee_Picture: '51.png',
+    Picture: '../../../../images/employees/51.png',
+    MobilePhone: '9095556939',
+  },
+  {
+    ID: 36,
+    FullName: 'Samantha Piper',
+    Title: 'Engineer',
+    Employee_Picture: '35.png',
+    Picture: '../../../../images/employees/35.png',
+    MobilePhone: '3235554512',
+  },
+  {
+    ID: 37,
+    FullName: 'Maggie Boxter',
+    Title: 'Engineer',
+    Employee_Picture: '36.png',
+    Picture: '../../../../images/employees/36.png',
+    MobilePhone: '7145557239',
+  },
+  {
+    ID: 38,
+    FullName: 'Terry Bradley',
+    Title: 'QA Engineer',
+    Employee_Picture: '37.png',
+    Picture: '../../../../images/employees/37.png',
+    MobilePhone: '8055552788',
+  },
+  {
+    ID: 39,
+    FullName: 'Gabe Jones',
+    Title: 'Retail Coordinator',
+    Employee_Picture: '38.png',
+    Picture: '../../../../images/employees/38.png',
+    MobilePhone: '3105555395',
+  },
+  {
+    ID: 40,
+    FullName: 'Lucy Ball',
+    Title: 'Sales Assistant',
+    Employee_Picture: '39.png',
+    Picture: '../../../../images/employees/39.png',
+    MobilePhone: '3105553357',
+  },
+  {
+    ID: 41,
+    FullName: 'Jim Packard',
+    Title: 'Retail Sales Manager',
+    Employee_Picture: '40.png',
+    Picture: '../../../../images/employees/40.png',
+    MobilePhone: '6615558224',
+  },
+  {
+    ID: 42,
+    FullName: 'Hannah Brookly',
+    Title: 'Online Sales Manager',
+    Employee_Picture: '41.png',
+    Picture: '../../../../images/employees/41.png',
+    MobilePhone: '8055553627',
+  },
+  {
+    ID: 43,
+    FullName: 'Harv Mudd',
+    Title: 'Retail Sales Manager',
+    Employee_Picture: '42.png',
+    Picture: '../../../../images/employees/42.png',
+    MobilePhone: '8315553895',
+  },
+  {
+    ID: 44,
+    FullName: 'Clark Morgan',
+    Title: 'Retail Sales Manager',
+    Employee_Picture: '43.png',
+    Picture: '../../../../images/employees/43.png',
+    MobilePhone: '9255552525',
+  },
+  {
+    ID: 45,
+    FullName: 'Todd Hoffman',
+    Title: 'Retail Sales Manager',
+    Employee_Picture: '44.png',
+    Picture: '../../../../images/employees/44.png',
+    MobilePhone: '9255553579',
+  },
+  {
+    ID: 46,
+    FullName: 'Jackie Garmin',
+    Title: 'Support Assistant',
+    Employee_Picture: '45.png',
+    Picture: '../../../../images/employees/45.png',
+    MobilePhone: '2135551824',
+  },
+  {
+    ID: 47,
+    FullName: 'Lincoln Bartlett',
+    Title: 'Sales Assistant',
+    Employee_Picture: '46.png',
+    Picture: '../../../../images/employees/46.png',
+    MobilePhone: '2135558272',
+  },
+  {
+    ID: 48,
+    FullName: 'Brad Farkus',
+    Title: 'Engineer',
+    Employee_Picture: '47.png',
+    Picture: '../../../../images/employees/47.png',
+    MobilePhone: '2135553626',
+  },
+  {
+    ID: 49,
+    FullName: 'Jenny Hobbs',
+    Title: 'Shipping Assistant',
+    Employee_Picture: '48.png',
+    Picture: '../../../../images/employees/48.png',
+    MobilePhone: '3105552668',
+  },
+  {
+    ID: 50,
+    FullName: 'Dallas Lou',
+    Title: 'Shipping Assistant',
+    Employee_Picture: '49.png',
+    Picture: '../../../../images/employees/49.png',
+    MobilePhone: '2135558357',
+  },
+  {
+    ID: 51,
+    FullName: 'Stu Pizaro',
+    Title: 'Engineer',
+    Employee_Picture: '50.png',
+    Picture: '../../../../images/employees/50.png',
+    MobilePhone: '2135552552',
+  },
+];
 
 @Injectable()
 export class Service {
-  getCustomers() {
-    return customers;
+  getEmployees() {
+    return employees;
   }
 }
diff --git a/apps/demos/Demos/Pagination/Overview/Angular/app/employee-card/employee-card.component.html b/apps/demos/Demos/Pagination/Overview/Angular/app/employee-card/employee-card.component.html
new file mode 100644
index 000000000000..436ef5afdbfc
--- /dev/null
+++ b/apps/demos/Demos/Pagination/Overview/Angular/app/employee-card/employee-card.component.html
@@ -0,0 +1,21 @@
+<div class="employees__img-wrapper">
+  <img
+    class="employees__img"
+    [src]="employee.Picture"
+    [alt]="employee.FullName"
+  />
+</div>
+<div class="employees__info">
+  <div class="employees__info-row">
+    <span class="employees__info-label">Full Name:</span>
+    <span class="employees__info-value">{{ employee.FullName }}</span>
+  </div>
+  <div class="employees__info-row">
+    <span class="employees__info-label">Position:</span>
+    <span class="employees__info-value">{{ employee.Title }}</span>
+  </div>
+  <div class="employees__info-row">
+    <span class="employees__info-label">Phone:</span>
+    <span class="employees__info-value">{{ employee.MobilePhone }}</span>
+  </div>
+</div>
diff --git a/apps/demos/Demos/Pagination/Overview/Angular/app/employee-card/employee-card.component.ts b/apps/demos/Demos/Pagination/Overview/Angular/app/employee-card/employee-card.component.ts
new file mode 100644
index 000000000000..7f112f55fbdb
--- /dev/null
+++ b/apps/demos/Demos/Pagination/Overview/Angular/app/employee-card/employee-card.component.ts
@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { Employee } from '../app.service';
+
+let modulePrefix = '';
+// @ts-ignore
+if (window && window.config.packageConfigPaths) {
+  modulePrefix = '/app';
+}
+
+@Component({
+  selector: 'employee-card',
+  templateUrl: `.${modulePrefix}/employee-card/employee-card.component.html`,
+})
+export class EmployeeCard {
+  @Input() employee: Employee;
+}
diff --git a/apps/demos/Demos/Pagination/Overview/Angular/index.html b/apps/demos/Demos/Pagination/Overview/Angular/index.html
index 3bb93e38968b..d6cce972f42b 100644
--- a/apps/demos/Demos/Pagination/Overview/Angular/index.html
+++ b/apps/demos/Demos/Pagination/Overview/Angular/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme/dist/css/dx.light.css" />
 
     <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
-    <script src="../../../../node_modules/zone.js/dist/zone.js"></script>
+    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="../../../../node_modules/reflect-metadata/Reflect.js"></script>
     <script src="../../../../node_modules/systemjs/dist/system.js"></script>