add EmployeeCard component

apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css

@@ -13,15 +13,15 @@ body {
   width: 100%;
 }
 
-.employees {
+::ng-deep .employees {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   min-height: 644px;
   padding-bottom: 24px;
 }
 
-.employees__card {
+::ng-deep employee-card {
   width: 100%;
   max-height: 312px;
   align-self: stretch;
@@ -31,25 +31,25 @@ body {
   background-color: var(--dx-component-color-bg);
 }
 
-.employees.employees--forth .employees__card {
+::ng-deep .employees.employees--forth employee-card {
   min-width: 250px;
   width: 390px;
   flex-basis: calc(50% - 10px);
 }
 
-.employees.employees--six .employees__card {
+::ng-deep .employees.employees--six employee-card {
   flex-basis: calc(33.3% - 12.5px);
 }
 
-.employees__img-wrapper {
+::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;
 }
 
-.employees__img {
+::ng-deep .employees__img {
   display: block;
   height: 220px;
   position: absolute;
@@ -59,30 +59,30 @@ body {
   transform: translateX(-50%);
 }
 
-.employees__info {
+::ng-deep .employees__info {
   padding: 24px;
 }
 
-.employees__info-row {
+::ng-deep .employees__info-row {
   margin-bottom: 8px;
   text-wrap: nowrap;
 }
 
-.employees__info-label {
+::ng-deep .employees__info-label {
   display: inline-block;
   font-weight: 600;
   vertical-align: middle;
 }
 
-.employees.employees--forth .employees__info-label {
+::ng-deep .employees.employees--forth .employees__info-label {
   width: 160px;
 }
 
-.employees.employees--six .employees__info-label {
+::ng-deep .employees.employees--six .employees__info-label {
   width: 80px;
 }
 
-.employees__info-value {
+::ng-deep .employees__info-value {
   display: inline-block;
   text-wrap: nowrap;
   text-overflow: ellipsis;
@@ -91,10 +91,10 @@ body {
   white-space:nowrap
 }
 
-.employees.employees--forth .employees__info-value {
+::ng-deep .employees.employees--forth .employees__info-value {
   max-width: 180px;
 }
 
-.employees.employees--six .employees__info-value {
+::ng-deep .employees.employees--six .employees__info-value {
   max-width: 120px;
 }

apps/demos/Demos/Pagination/Overview/Angular/app/app.component.html

@@ -4,29 +4,7 @@
     [ngClass]="pageSize === 4 ? 'employees--forth' : 'employees--six'"
   >
     @for (employee of pageEmployees; track employee.ID) {
-    <div class="employees__card">
-      <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>
-    </div>
+    <employee-card [employee]="employee"></employee-card>
     }
   </div>
 

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, DxPaginationModule } from 'devextreme-angular';
+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();
@@ -61,10 +62,9 @@ export class AppComponent {
 @NgModule({
   imports: [
     BrowserModule,
-    DxDataGridModule,
     DxPaginationModule,
   ],
-  declarations: [AppComponent],
+  declarations: [AppComponent, EmployeeCard],
   bootstrap: [AppComponent],
 })
 export class AppModule { }

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>

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;
+}