CardView: Field Template demo (#30079)

Author: Raushen

apps/demos/Demos/CardView/FieldTemplate/Angular/app/app.component.css

@@ -0,0 +1,3 @@
+::ng-deep .dx-cardview-card-header > div {
+  width: 100%;
+}

apps/demos/Demos/CardView/FieldTemplate/Angular/app/app.component.html

@@ -1,6 +1,44 @@
-<dx-card-view id="cardView" [dataSource]="customers" keyExpr="ID">
+<dx-card-view [dataSource]="tasks" cardsPerRow="auto" [cardMinWidth]="260">
+  <dxo-card-view-paging [pageSize]="12" />
+  <dxo-card-view-card-header [visible]="true" template="headerTemplate" />
+
   <dxi-card-view-column
-    *ngFor="let column of columns"
-    [dataField]="column"
-  ></dxi-card-view-column>
+    dataField="Task_Priority"
+    caption="Priority"
+    fieldValueTemplate="priorityTemplate"
+  />
+  <dxi-card-view-column
+    dataField="Task_Start_Date"
+    caption="Start Date"
+    dataType="date"
+  />
+  <dxi-card-view-column
+    dataField="Task_Due_Date"
+    caption="End Date"
+    dataType="date"
+  />
+  <dxi-card-view-column
+    dataField="Task_Assigned_Employee_ID"
+    caption="Assigned to"
+    fieldValueTemplate="assignedToTemplate"
+  />
+  <dxi-card-view-column dataField="Task_Status" caption="Status" />
+  <dxi-card-view-column
+    dataField="Task_Completion"
+    caption="Completed"
+    fieldTemplate="progressTemplate"
+  />
+
+  <div *dxTemplate="let model of 'headerTemplate'">
+    <card-header [text]="model.card.data.Task_Subject" />
+  </div>
+  <div *dxTemplate="let model of 'priorityTemplate'">
+    <priority [priorityID]="model.field.value" />
+  </div>
+  <div *dxTemplate="let model of 'assignedToTemplate'">
+    <employee [employeeID]="model.field.value" />
+  </div>
+  <div *dxTemplate="let model of 'progressTemplate'">
+    <progress-bar [value]="model.field.value" />
+  </div>
 </dx-card-view>

apps/demos/Demos/CardView/FieldTemplate/Angular/app/app.component.ts

@@ -1,8 +1,18 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxCardViewModule } from 'devextreme-angular';
-import { Customer, Service } from './app.service';
+import {
+  DxCardViewModule,
+  DxTemplateModule,
+  DxProgressBarModule,
+} from 'devextreme-angular';
+import { Task, Service } from './app.service';
+import { EmployeeService } from './employee.service';
+import { PriorityService } from './priority.service';
+import { CardHeader } from './card-header/card-header.component';
+import { PriorityComponent } from './priority/priority.component';
+import { EmployeeComponent } from './employee/employee.component';
+import { ProgressComponent } from './progress-bar/progress-bar.component';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -17,24 +27,32 @@ 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[];
-
-  columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
+  tasks: Task[];
 
   constructor(service: Service) {
-    this.customers = service.getCustomers();
+    this.tasks = service.getTasks();
   }
 }
 
 @NgModule({
   imports: [
     BrowserModule,
     DxCardViewModule,
+    DxProgressBarModule,
+    DxTemplateModule,
+  ],
+  declarations: [
+    AppComponent,
+    CardHeader,
+    PriorityComponent,
+    EmployeeComponent,
+    ProgressComponent,
   ],
-  declarations: [AppComponent],
+  providers: [EmployeeService, PriorityService],
   bootstrap: [AppComponent],
 })
 export class AppModule { }