Angular Card View - Field Template

import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxCardViewModule, DxTemplateModule, DxProgressBarModule, } from 'devextreme-angular'; import { Task, Service } from './app.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(); } let modulePrefix = ''; // @ts-ignore if (window && window.config?.packageConfigPaths) { modulePrefix = '/app'; } @Component({ selector: 'demo-app', templateUrl: `app/app.component.html`, styleUrls: [`app/app.component.css`], }) export class AppComponent { tasks: Task[]; constructor(service: Service) { this.tasks = service.getTasks(); } } @NgModule({ imports: [ BrowserModule, DxCardViewModule, DxProgressBarModule, DxTemplateModule, ], declarations: [ AppComponent, CardHeader, PriorityComponent, EmployeeComponent, ProgressComponent, ], providers: [Service], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);

::ng-deep .dx-cardview-card-header > div { width: 100%; }

import { Injectable } from '@angular/core'; export interface Task { Task_ID: number; Task_Assigned_Employee_ID: number; Task_Owner_ID: number; Task_Subject: string; Task_Start_Date: string; Task_Due_Date: string; Task_Status: string; Task_Priority: number; Task_Completion: number; Task_Parent_ID: number; } const tasks: Task[] = [{ Task_ID: 1, Task_Assigned_Employee_ID: 1, Task_Owner_ID: 1, Task_Subject: 'Plans 2015', Task_Start_Date: '2015-01-01T00:00:00', Task_Due_Date: '2015-04-01T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 0, }, { Task_ID: 2, Task_Assigned_Employee_ID: 2, Task_Owner_ID: 1, Task_Subject: 'Health Insurance', Task_Start_Date: '2015-02-12T00:00:00', Task_Due_Date: '2015-05-30T00:00:00', Task_Status: 'In Progress', Task_Priority: 4, Task_Completion: 75, Task_Parent_ID: 0, }, { Task_ID: 3, Task_Assigned_Employee_ID: 4, Task_Owner_ID: 4, Task_Subject: 'New Brochures', Task_Start_Date: '2015-02-17T00:00:00', Task_Due_Date: '2015-03-01T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 0, }, { Task_ID: 4, Task_Assigned_Employee_ID: 31, Task_Owner_ID: 33, Task_Subject: 'Training', Task_Start_Date: '2015-03-02T00:00:00', Task_Due_Date: '2015-06-29T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 0, }, { Task_ID: 5, Task_Assigned_Employee_ID: 5, Task_Owner_ID: 5, Task_Subject: 'NDA', Task_Start_Date: '2015-03-12T00:00:00', Task_Due_Date: '2015-05-01T00:00:00', Task_Status: 'In Progress', Task_Priority: 3, Task_Completion: 90, Task_Parent_ID: 0, }, { Task_ID: 6, Task_Assigned_Employee_ID: 7, Task_Owner_ID: 1, Task_Subject: 'Revenue Projections', Task_Start_Date: '2015-03-24T00:00:00', Task_Due_Date: '2015-04-15T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 0, }, { Task_ID: 7, Task_Assigned_Employee_ID: 9, Task_Owner_ID: 9, Task_Subject: 'TV Recall', Task_Start_Date: '2015-04-18T00:00:00', Task_Due_Date: '2016-02-04T00:00:00', Task_Status: 'In Progress', Task_Priority: 4, Task_Completion: 90, Task_Parent_ID: 0, }, { Task_ID: 8, Task_Assigned_Employee_ID: 6, Task_Owner_ID: 5, Task_Subject: 'Overtime', Task_Start_Date: '2015-06-10T00:00:00', Task_Due_Date: '2015-06-20T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 0, }, { Task_ID: 9, Task_Assigned_Employee_ID: 8, Task_Owner_ID: 12, Task_Subject: 'Recall and Refund Forms', Task_Start_Date: '2015-06-17T00:00:00', Task_Due_Date: '2016-04-09T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 0, }, { Task_ID: 10, Task_Assigned_Employee_ID: 10, Task_Owner_ID: 8, Task_Subject: 'Shippers', Task_Start_Date: '2015-07-10T00:00:00', Task_Due_Date: '2016-04-11T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 0, }, { Task_ID: 11, Task_Assigned_Employee_ID: 6, Task_Owner_ID: 22, Task_Subject: 'Hardware Upgrade', Task_Start_Date: '2015-07-22T00:00:00', Task_Due_Date: '2016-05-01T00:00:00', Task_Status: 'In Progress', Task_Priority: 3, Task_Completion: 95, Task_Parent_ID: 0, }, { Task_ID: 12, Task_Assigned_Employee_ID: 6, Task_Owner_ID: 24, Task_Subject: 'Touch-Enabled Apps', Task_Start_Date: '2015-08-05T00:00:00', Task_Due_Date: '2016-04-30T00:00:00', Task_Status: 'In Progress', Task_Priority: 2, Task_Completion: 90, Task_Parent_ID: 0, }, { Task_ID: 13, Task_Assigned_Employee_ID: 6, Task_Owner_ID: 6, Task_Subject: 'Online Sales', Task_Start_Date: '2015-08-20T00:00:00', Task_Due_Date: '2015-09-15T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 0, }, { Task_ID: 14, Task_Assigned_Employee_ID: 6, Task_Owner_ID: 8, Task_Subject: 'New Website Design', Task_Start_Date: '2015-09-17T00:00:00', Task_Due_Date: '2015-11-01T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 0, }, { Task_ID: 15, Task_Assigned_Employee_ID: 6, Task_Owner_ID: 22, Task_Subject: 'Bandwidth Increase', Task_Start_Date: '2015-11-01T00:00:00', Task_Due_Date: '2015-11-07T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 0, }, { Task_ID: 16, Task_Assigned_Employee_ID: 18, Task_Owner_ID: 9, Task_Subject: 'Support', Task_Start_Date: '2015-11-10T00:00:00', Task_Due_Date: '2015-11-15T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 0, }, { Task_ID: 17, Task_Assigned_Employee_ID: 31, Task_Owner_ID: 31, Task_Subject: 'Training Material', Task_Start_Date: '2015-11-14T00:00:00', Task_Due_Date: '2016-02-05T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 0, }, { Task_ID: 18, Task_Assigned_Employee_ID: 22, Task_Owner_ID: 3, Task_Subject: 'New Database', Task_Start_Date: '2015-12-24T00:00:00', Task_Due_Date: '2015-12-29T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 95, Task_Parent_ID: 0, }, { Task_ID: 19, Task_Assigned_Employee_ID: 32, Task_Owner_ID: 3, Task_Subject: 'New HDMI Specification', Task_Start_Date: '2016-01-02T00:00:00', Task_Due_Date: '2016-01-31T00:00:00', Task_Status: 'Deferred', Task_Priority: 2, Task_Completion: 50, Task_Parent_ID: 0, }, { Task_ID: 20, Task_Assigned_Employee_ID: 3, Task_Owner_ID: 3, Task_Subject: 'Automation Server', Task_Start_Date: '2016-01-15T00:00:00', Task_Due_Date: '2016-04-30T00:00:00', Task_Status: 'In Progress', Task_Priority: 3, Task_Completion: 85, Task_Parent_ID: 0, }, { Task_ID: 21, Task_Assigned_Employee_ID: 40, Task_Owner_ID: 8, Task_Subject: 'Retail Sales', Task_Start_Date: '2016-01-20T00:00:00', Task_Due_Date: '2016-02-10T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 0, }, { Task_ID: 22, Task_Assigned_Employee_ID: 1, Task_Owner_ID: 1, Task_Subject: 'Reports', Task_Start_Date: '2016-03-13T00:00:00', Task_Due_Date: '2016-05-07T00:00:00', Task_Status: 'In Progress', Task_Priority: 4, Task_Completion: 50, Task_Parent_ID: 0, }, { Task_ID: 23, Task_Assigned_Employee_ID: 5, Task_Owner_ID: 1, Task_Subject: 'Budget', Task_Start_Date: '2016-03-20T00:00:00', Task_Due_Date: '2016-04-01T00:00:00', Task_Status: 'In Progress', Task_Priority: 4, Task_Completion: 30, Task_Parent_ID: 0, }, { Task_ID: 24, Task_Assigned_Employee_ID: 13, Task_Owner_ID: 10, Task_Subject: 'Shipping Labels', Task_Start_Date: '2016-04-01T00:00:00', Task_Due_Date: '2016-04-15T00:00:00', Task_Status: 'In Progress', Task_Priority: 2, Task_Completion: 50, Task_Parent_ID: 0, }, { Task_ID: 25, Task_Assigned_Employee_ID: 10, Task_Owner_ID: 10, Task_Subject: 'New Warehouse', Task_Start_Date: '2016-04-05T00:00:00', Task_Due_Date: '2016-04-15T00:00:00', Task_Status: 'In Progress', Task_Priority: 2, Task_Completion: 65, Task_Parent_ID: 0, }, { Task_ID: 26, Task_Assigned_Employee_ID: 10, Task_Owner_ID: 10, Task_Subject: 'Forklift', Task_Start_Date: '2016-04-07T00:00:00', Task_Due_Date: '2016-04-20T00:00:00', Task_Status: 'In Progress', Task_Priority: 2, Task_Completion: 20, Task_Parent_ID: 0, }, { Task_ID: 27, Task_Assigned_Employee_ID: 1, Task_Owner_ID: 30, Task_Subject: 'Customer Follow Up Plan', Task_Start_Date: '2016-05-05T00:00:00', Task_Due_Date: '2016-05-11T00:00:00', Task_Status: 'In Progress', Task_Priority: 2, Task_Completion: 40, Task_Parent_ID: 0, }, { Task_ID: 28, Task_Assigned_Employee_ID: 7, Task_Owner_ID: 1, Task_Subject: 'Prepare 2015 Financial', Task_Start_Date: '2015-01-15T00:00:00', Task_Due_Date: '2015-01-31T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 1, }, { Task_ID: 29, Task_Assigned_Employee_ID: 4, Task_Owner_ID: 1, Task_Subject: 'Prepare 2015 Marketing Plan', Task_Start_Date: '2015-01-01T00:00:00', Task_Due_Date: '2015-01-31T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 1, }, { Task_ID: 32, Task_Assigned_Employee_ID: 1, Task_Owner_ID: 4, Task_Subject: 'Google AdWords Strategy', Task_Start_Date: '2015-02-16T00:00:00', Task_Due_Date: '2015-02-28T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 29, }, { Task_ID: 34, Task_Assigned_Employee_ID: 28, Task_Owner_ID: 1, Task_Subject: '2015 Brochure Designs', Task_Start_Date: '2015-02-19T00:00:00', Task_Due_Date: '2015-02-24T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 3, }, { Task_ID: 35, Task_Assigned_Employee_ID: 29, Task_Owner_ID: 28, Task_Subject: 'Brochure Design Review', Task_Start_Date: '2015-02-19T00:00:00', Task_Due_Date: '2015-02-22T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 34, }, { Task_ID: 36, Task_Assigned_Employee_ID: 29, Task_Owner_ID: 28, Task_Subject: 'Website Re-Design Plan', Task_Start_Date: '2015-02-19T00:00:00', Task_Due_Date: '2015-02-24T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 34, }, { Task_ID: 38, Task_Assigned_Employee_ID: 8, Task_Owner_ID: 4, Task_Subject: 'Update Sales Strategy Documents', Task_Start_Date: '2015-02-20T00:00:00', Task_Due_Date: '2015-02-22T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 29, }, { Task_ID: 39, Task_Assigned_Employee_ID: 41, Task_Owner_ID: 8, Task_Subject: 'Create 2012 Sales Report', Task_Start_Date: '2015-02-20T00:00:00', Task_Due_Date: '2015-02-21T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 29, }, { Task_ID: 42, Task_Assigned_Employee_ID: 3, Task_Owner_ID: 1, Task_Subject: 'Deliver R&D Plans for 2015', Task_Start_Date: '2015-03-01T00:00:00', Task_Due_Date: '2015-03-10T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 1, }, { Task_ID: 43, Task_Assigned_Employee_ID: 32, Task_Owner_ID: 3, Task_Subject: 'Create 2015 R&D Plans', Task_Start_Date: '2015-03-01T00:00:00', Task_Due_Date: '2015-03-07T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 42, }, { Task_ID: 44, Task_Assigned_Employee_ID: 33, Task_Owner_ID: 32, Task_Subject: '2015 QA Strategy Report', Task_Start_Date: '2015-03-02T00:00:00', Task_Due_Date: '2015-03-05T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 42, }, { Task_ID: 45, Task_Assigned_Employee_ID: 31, Task_Owner_ID: 33, Task_Subject: '2015 Training Events', Task_Start_Date: '2015-03-02T00:00:00', Task_Due_Date: '2015-03-04T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 4, }, { Task_ID: 46, Task_Assigned_Employee_ID: 2, Task_Owner_ID: 5, Task_Subject: 'Non-Compete Agreements', Task_Start_Date: '2015-03-12T00:00:00', Task_Due_Date: '2015-03-14T00:00:00', Task_Status: 'Completed', Task_Priority: 1, Task_Completion: 100, Task_Parent_ID: 5, }, { Task_ID: 47, Task_Assigned_Employee_ID: 1, Task_Owner_ID: 2, Task_Subject: 'Update NDA Agreement', Task_Start_Date: '2015-03-14T00:00:00', Task_Due_Date: '2015-03-16T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 5, }, { Task_ID: 49, Task_Assigned_Employee_ID: 6, Task_Owner_ID: 5, Task_Subject: 'Sign Updated NDA', Task_Start_Date: '2015-03-20T00:00:00', Task_Due_Date: '2015-03-25T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 5, }, { Task_ID: 50, Task_Assigned_Employee_ID: 7, Task_Owner_ID: 5, Task_Subject: 'Sign Updated NDA', Task_Start_Date: '2015-03-20T00:00:00', Task_Due_Date: '2015-03-25T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 5, }, { Task_ID: 51, Task_Assigned_Employee_ID: 8, Task_Owner_ID: 5, Task_Subject: 'Sign Updated NDA', Task_Start_Date: '2015-03-20T00:00:00', Task_Due_Date: '2015-03-25T00:00:00', Task_Status: 'Need Assistance', Task_Priority: 3, Task_Completion: 25, Task_Parent_ID: 5, }, { Task_ID: 52, Task_Assigned_Employee_ID: 9, Task_Owner_ID: 5, Task_Subject: 'Sign Updated NDA', Task_Start_Date: '2015-03-20T00:00:00', Task_Due_Date: '2015-03-25T00:00:00', Task_Status: 'In Progress', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 5, }, { Task_ID: 56, Task_Assigned_Employee_ID: 14, Task_Owner_ID: 10, Task_Subject: 'Submit Signed NDA', Task_Start_Date: '2015-03-22T00:00:00', Task_Due_Date: '2015-03-24T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 5, }, { Task_ID: 57, Task_Assigned_Employee_ID: 13, Task_Owner_ID: 10, Task_Subject: 'Submit Signed NDA', Task_Start_Date: '2015-03-22T00:00:00', Task_Due_Date: '2015-03-24T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 5, }, { Task_ID: 58, Task_Assigned_Employee_ID: 15, Task_Owner_ID: 10, Task_Subject: 'Submit Signed NDA', Task_Start_Date: '2015-03-22T00:00:00', Task_Due_Date: '2015-03-24T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 5, }, { Task_ID: 59, Task_Assigned_Employee_ID: 16, Task_Owner_ID: 10, Task_Subject: 'Submit Signed NDA', Task_Start_Date: '2015-03-22T00:00:00', Task_Due_Date: '2015-03-24T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 5, }, { Task_ID: 60, Task_Assigned_Employee_ID: 7, Task_Owner_ID: 1, Task_Subject: 'Update Revenue Projections', Task_Start_Date: '2015-03-24T00:00:00', Task_Due_Date: '2015-04-07T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 6, }, { Task_ID: 61, Task_Assigned_Employee_ID: 8, Task_Owner_ID: 7, Task_Subject: 'Review Revenue Projections', Task_Start_Date: '2015-03-25T00:00:00', Task_Due_Date: '2015-04-06T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 6, }, { Task_ID: 62, Task_Assigned_Employee_ID: 41, Task_Owner_ID: 7, Task_Subject: 'Comment on Revenue Projections', Task_Start_Date: '2015-03-25T00:00:00', Task_Due_Date: '2015-04-03T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 6, }, { Task_ID: 63, Task_Assigned_Employee_ID: 42, Task_Owner_ID: 7, Task_Subject: 'Comment on Revenue Projections', Task_Start_Date: '2015-03-25T00:00:00', Task_Due_Date: '2015-04-03T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 6, }, { Task_ID: 64, Task_Assigned_Employee_ID: 45, Task_Owner_ID: 7, Task_Subject: 'Comment on Revenue Projections', Task_Start_Date: '2015-03-25T00:00:00', Task_Due_Date: '2015-04-03T00:00:00', Task_Status: 'Deferred', Task_Priority: 3, Task_Completion: 25, Task_Parent_ID: 6, }, { Task_ID: 67, Task_Assigned_Employee_ID: 14, Task_Owner_ID: 10, Task_Subject: 'Scan Health Insurance Forms', Task_Start_Date: '2015-04-15T00:00:00', Task_Due_Date: '2015-04-20T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 2, }, { Task_ID: 68, Task_Assigned_Employee_ID: 15, Task_Owner_ID: 14, Task_Subject: 'Sign Health Insurance Forms', Task_Start_Date: '2015-04-16T00:00:00', Task_Due_Date: '2015-04-19T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 2, }, { Task_ID: 69, Task_Assigned_Employee_ID: 13, Task_Owner_ID: 14, Task_Subject: 'Sign Health Insurance Forms', Task_Start_Date: '2015-04-16T00:00:00', Task_Due_Date: '2015-04-19T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 2, }, { Task_ID: 70, Task_Assigned_Employee_ID: 16, Task_Owner_ID: 14, Task_Subject: 'Sign Health Insurance Forms', Task_Start_Date: '2015-04-16T00:00:00', Task_Due_Date: '2015-04-19T00:00:00', Task_Status: 'Deferred', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 2, }, { Task_ID: 72, Task_Assigned_Employee_ID: 17, Task_Owner_ID: 9, Task_Subject: 'Follow up with East Coast Stores', Task_Start_Date: '2015-04-18T00:00:00', Task_Due_Date: '2016-01-04T00:00:00', Task_Status: 'In Progress', Task_Priority: 3, Task_Completion: 85, Task_Parent_ID: 7, }, { Task_ID: 75, Task_Assigned_Employee_ID: 2, Task_Owner_ID: 7, Task_Subject: 'Give Final Approval for Refunds', Task_Start_Date: '2015-05-05T00:00:00', Task_Due_Date: '2015-05-15T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 7, }, { Task_ID: 76, Task_Assigned_Employee_ID: 32, Task_Owner_ID: 3, Task_Subject: 'Prepare Product Recall Report', Task_Start_Date: '2015-05-10T00:00:00', Task_Due_Date: '2015-05-16T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 7, }, { Task_ID: 78, Task_Assigned_Employee_ID: 31, Task_Owner_ID: 32, Task_Subject: 'Create Training Course for New TVs', Task_Start_Date: '2015-05-29T00:00:00', Task_Due_Date: '2015-06-29T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 4, }, { Task_ID: 80, Task_Assigned_Employee_ID: 6, Task_Owner_ID: 5, Task_Subject: 'Review Overtime Report', Task_Start_Date: '2015-06-10T00:00:00', Task_Due_Date: '2015-06-14T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 8, }, { Task_ID: 81, Task_Assigned_Employee_ID: 21, Task_Owner_ID: 6, Task_Subject: 'Submit Overtime Request Forms', Task_Start_Date: '2015-06-11T00:00:00', Task_Due_Date: '2015-06-12T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 8, }, { Task_ID: 82, Task_Assigned_Employee_ID: 22, Task_Owner_ID: 6, Task_Subject: 'Submit Overtime Request Forms', Task_Start_Date: '2015-06-11T00:00:00', Task_Due_Date: '2015-06-12T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 8, }, { Task_ID: 83, Task_Assigned_Employee_ID: 23, Task_Owner_ID: 6, Task_Subject: 'Submit Overtime Request Forms', Task_Start_Date: '2015-06-11T00:00:00', Task_Due_Date: '2015-06-12T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 8, }, { Task_ID: 84, Task_Assigned_Employee_ID: 2, Task_Owner_ID: 6, Task_Subject: 'Overtime Approval Guidelines', Task_Start_Date: '2015-06-15T00:00:00', Task_Due_Date: '2015-06-20T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 8, }, { Task_ID: 85, Task_Assigned_Employee_ID: 8, Task_Owner_ID: 12, Task_Subject: 'Refund Request Template', Task_Start_Date: '2015-06-17T00:00:00', Task_Due_Date: '2016-04-01T00:00:00', Task_Status: 'Deferred', Task_Priority: 2, Task_Completion: 0, Task_Parent_ID: 9, }, { Task_ID: 86, Task_Assigned_Employee_ID: 8, Task_Owner_ID: 12, Task_Subject: 'Recall Rebate Form', Task_Start_Date: '2015-06-17T00:00:00', Task_Due_Date: '2016-04-01T00:00:00', Task_Status: 'Deferred', Task_Priority: 2, Task_Completion: 0, Task_Parent_ID: 9, }, { Task_ID: 88, Task_Assigned_Employee_ID: 8, Task_Owner_ID: 30, Task_Subject: 'Review Customer Feedback Report', Task_Start_Date: '2015-06-30T00:00:00', Task_Due_Date: '2015-07-03T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 9, }, { Task_ID: 89, Task_Assigned_Employee_ID: 1, Task_Owner_ID: 8, Task_Subject: 'Customer Feedback Report Analysis', Task_Start_Date: '2015-07-05T00:00:00', Task_Due_Date: '2016-04-09T00:00:00', Task_Status: 'Deferred', Task_Priority: 2, Task_Completion: 0, Task_Parent_ID: 9, }, { Task_ID: 91, Task_Assigned_Employee_ID: 13, Task_Owner_ID: 10, Task_Subject: 'Provide Feedback on Shippers', Task_Start_Date: '2015-07-11T00:00:00', Task_Due_Date: '2015-07-14T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 10, }, { Task_ID: 92, Task_Assigned_Employee_ID: 15, Task_Owner_ID: 10, Task_Subject: 'Provide Feedback on Shippers', Task_Start_Date: '2015-07-11T00:00:00', Task_Due_Date: '2015-07-14T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 10, }, { Task_ID: 93, Task_Assigned_Employee_ID: 16, Task_Owner_ID: 10, Task_Subject: 'Provide Feedback on Shippers', Task_Start_Date: '2015-07-11T00:00:00', Task_Due_Date: '2015-07-14T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 10, }, { Task_ID: 94, Task_Assigned_Employee_ID: 2, Task_Owner_ID: 10, Task_Subject: 'Select Preferred Shipper', Task_Start_Date: '2015-07-16T00:00:00', Task_Due_Date: '2015-07-20T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 10, }, { Task_ID: 95, Task_Assigned_Employee_ID: 1, Task_Owner_ID: 2, Task_Subject: 'Complete Shipper Selection Form', Task_Start_Date: '2015-07-21T00:00:00', Task_Due_Date: '2016-04-11T00:00:00', Task_Status: 'Deferred', Task_Priority: 4, Task_Completion: 0, Task_Parent_ID: 10, }, { Task_ID: 96, Task_Assigned_Employee_ID: 6, Task_Owner_ID: 22, Task_Subject: 'Upgrade Server Hardware', Task_Start_Date: '2015-07-22T00:00:00', Task_Due_Date: '2015-07-31T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 11, }, { Task_ID: 97, Task_Assigned_Employee_ID: 6, Task_Owner_ID: 21, Task_Subject: 'Upgrade Personal Computers', Task_Start_Date: '2015-07-24T00:00:00', Task_Due_Date: '2016-04-30T00:00:00', Task_Status: 'In Progress', Task_Priority: 2, Task_Completion: 85, Task_Parent_ID: 11, }, { Task_ID: 105, Task_Assigned_Employee_ID: 6, Task_Owner_ID: 3, Task_Subject: 'Site Up-Time Report', Task_Start_Date: '2015-08-20T00:00:00', Task_Due_Date: '2015-08-24T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 13, }, { Task_ID: 106, Task_Assigned_Employee_ID: 4, Task_Owner_ID: 3, Task_Subject: 'Review Site Up-Time Report', Task_Start_Date: '2015-08-24T00:00:00', Task_Due_Date: '2015-08-30T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 13, }, { Task_ID: 107, Task_Assigned_Employee_ID: 1, Task_Owner_ID: 4, Task_Subject: 'Review Online Sales Report', Task_Start_Date: '2015-08-30T00:00:00', Task_Due_Date: '2015-09-04T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 13, }, { Task_ID: 111, Task_Assigned_Employee_ID: 28, Task_Owner_ID: 8, Task_Subject: 'Submit New Website Design', Task_Start_Date: '2015-09-17T00:00:00', Task_Due_Date: '2015-09-22T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 14, }, { Task_ID: 112, Task_Assigned_Employee_ID: 29, Task_Owner_ID: 28, Task_Subject: 'Create Icons for Website', Task_Start_Date: '2015-09-17T00:00:00', Task_Due_Date: '2015-09-21T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 111, }, { Task_ID: 113, Task_Assigned_Employee_ID: 6, Task_Owner_ID: 28, Task_Subject: 'Review PSDs for New Website', Task_Start_Date: '2015-09-23T00:00:00', Task_Due_Date: '2015-10-15T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 111, }, { Task_ID: 114, Task_Assigned_Employee_ID: 24, Task_Owner_ID: 6, Task_Subject: 'Create New Shopping Cart', Task_Start_Date: '2015-09-24T00:00:00', Task_Due_Date: '2015-10-01T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 113, }, { Task_ID: 115, Task_Assigned_Employee_ID: 25, Task_Owner_ID: 6, Task_Subject: 'Create New Product Pages', Task_Start_Date: '2015-09-24T00:00:00', Task_Due_Date: '2015-10-04T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 113, }, { Task_ID: 116, Task_Assigned_Employee_ID: 8, Task_Owner_ID: 6, Task_Subject: 'Review New Product Pages', Task_Start_Date: '2015-10-04T00:00:00', Task_Due_Date: '2015-10-10T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 113, }, { Task_ID: 117, Task_Assigned_Employee_ID: 4, Task_Owner_ID: 8, Task_Subject: 'Approve Website Launch', Task_Start_Date: '2015-10-10T00:00:00', Task_Due_Date: '2015-10-15T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 113, }, { Task_ID: 118, Task_Assigned_Employee_ID: 6, Task_Owner_ID: 8, Task_Subject: 'Launch New Website', Task_Start_Date: '2015-10-15T00:00:00', Task_Due_Date: '2015-10-16T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 111, }, { Task_ID: 128, Task_Assigned_Employee_ID: 33, Task_Owner_ID: 31, Task_Subject: 'Review New Training Material', Task_Start_Date: '2015-11-14T00:00:00', Task_Due_Date: '2015-11-18T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 17, }, { Task_ID: 132, Task_Assigned_Employee_ID: 29, Task_Owner_ID: 28, Task_Subject: 'Publish New Art on the Server', Task_Start_Date: '2015-12-03T00:00:00', Task_Due_Date: '2015-12-04T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 131, }, { Task_ID: 136, Task_Assigned_Employee_ID: 8, Task_Owner_ID: 45, Task_Subject: 'Ship New Brochures to Field', Task_Start_Date: '2015-12-19T00:00:00', Task_Due_Date: '2015-12-31T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 17, }, { Task_ID: 137, Task_Assigned_Employee_ID: 14, Task_Owner_ID: 8, Task_Subject: 'Ship Brochures to Todd Hoffman', Task_Start_Date: '2015-12-23T00:00:00', Task_Due_Date: '2015-12-31T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 17, }, { Task_ID: 138, Task_Assigned_Employee_ID: 22, Task_Owner_ID: 3, Task_Subject: 'Update Server with Service Packs', Task_Start_Date: '2015-12-24T00:00:00', Task_Due_Date: '2015-12-24T00:00:00', Task_Status: 'Completed', Task_Priority: 3, Task_Completion: 100, Task_Parent_ID: 18, }, { Task_ID: 139, Task_Assigned_Employee_ID: 22, Task_Owner_ID: 6, Task_Subject: 'Install New Database', Task_Start_Date: '2015-12-27T00:00:00', Task_Due_Date: '2015-12-28T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 18, }, { Task_ID: 140, Task_Assigned_Employee_ID: 6, Task_Owner_ID: 22, Task_Subject: 'Approve Overtime for HR', Task_Start_Date: '2015-12-29T00:00:00', Task_Due_Date: '2015-12-29T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 18, }, { Task_ID: 141, Task_Assigned_Employee_ID: 32, Task_Owner_ID: 3, Task_Subject: 'Review New HDMI Specification', Task_Start_Date: '2016-01-02T00:00:00', Task_Due_Date: '2016-01-31T00:00:00', Task_Status: 'Deferred', Task_Priority: 2, Task_Completion: 50, Task_Parent_ID: 19, }, { Task_ID: 146, Task_Assigned_Employee_ID: 17, Task_Owner_ID: 31, Task_Subject: 'Feedback on New Training Course', Task_Start_Date: '2016-01-28T00:00:00', Task_Due_Date: '2016-02-05T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 17, }, { Task_ID: 147, Task_Assigned_Employee_ID: 10, Task_Owner_ID: 7, Task_Subject: 'Send Monthly Invoices from Shippers', Task_Start_Date: '2016-02-01T00:00:00', Task_Due_Date: '2016-02-07T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 10, }, { Task_ID: 150, Task_Assigned_Employee_ID: 39, Task_Owner_ID: 40, Task_Subject: 'Reschedule Sales Team Meeting', Task_Start_Date: '2016-02-10T00:00:00', Task_Due_Date: '2016-02-10T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 21, }, { Task_ID: 151, Task_Assigned_Employee_ID: 45, Task_Owner_ID: 44, Task_Subject: 'Update Database with New Leads', Task_Start_Date: '2016-03-01T00:00:00', Task_Due_Date: '2016-03-10T00:00:00', Task_Status: 'In Progress', Task_Priority: 2, Task_Completion: 80, Task_Parent_ID: 18, }, { Task_ID: 152, Task_Assigned_Employee_ID: 12, Task_Owner_ID: 41, Task_Subject: 'Send Territory Sales Breakdown', Task_Start_Date: '2016-03-13T00:00:00', Task_Due_Date: '2016-03-16T00:00:00', Task_Status: 'In Progress', Task_Priority: 4, Task_Completion: 50, Task_Parent_ID: 22, }, { Task_ID: 153, Task_Assigned_Employee_ID: 41, Task_Owner_ID: 1, Task_Subject: 'Territory Sales Breakdown Report', Task_Start_Date: '2016-03-17T00:00:00', Task_Due_Date: '2016-03-17T00:00:00', Task_Status: 'In Progress', Task_Priority: 3, Task_Completion: 50, Task_Parent_ID: 22, }, { Task_ID: 154, Task_Assigned_Employee_ID: 3, Task_Owner_ID: 1, Task_Subject: 'Return Merchandise Report', Task_Start_Date: '2016-03-17T00:00:00', Task_Due_Date: '2016-03-18T00:00:00', Task_Status: 'In Progress', Task_Priority: 4, Task_Completion: 25, Task_Parent_ID: 22, }, { Task_ID: 156, Task_Assigned_Employee_ID: 6, Task_Owner_ID: 5, Task_Subject: 'Staff Productivity Report', Task_Start_Date: '2016-03-20T00:00:00', Task_Due_Date: '2016-03-21T00:00:00', Task_Status: 'Not Started', Task_Priority: 2, Task_Completion: 0, Task_Parent_ID: 23, }, { Task_ID: 157, Task_Assigned_Employee_ID: 5, Task_Owner_ID: 1, Task_Subject: 'Review HR Budget Company Wide', Task_Start_Date: '2016-03-20T00:00:00', Task_Due_Date: '2016-03-25T00:00:00', Task_Status: 'In Progress', Task_Priority: 2, Task_Completion: 40, Task_Parent_ID: 23, }, { Task_ID: 159, Task_Assigned_Employee_ID: 9, Task_Owner_ID: 5, Task_Subject: 'Support Dept Budget Report', Task_Start_Date: '2016-03-23T00:00:00', Task_Due_Date: '2016-03-25T00:00:00', Task_Status: 'In Progress', Task_Priority: 4, Task_Completion: 60, Task_Parent_ID: 23, }, { Task_ID: 160, Task_Assigned_Employee_ID: 6, Task_Owner_ID: 5, Task_Subject: 'IT Dept Budget Request Report', Task_Start_Date: '2016-03-23T00:00:00', Task_Due_Date: '2016-03-25T00:00:00', Task_Status: 'In Progress', Task_Priority: 4, Task_Completion: 30, Task_Parent_ID: 23, }, { Task_ID: 162, Task_Assigned_Employee_ID: 26, Task_Owner_ID: 7, Task_Subject: '1Q Travel Spend Report', Task_Start_Date: '2016-03-24T00:00:00', Task_Due_Date: '2016-03-25T00:00:00', Task_Status: 'In Progress', Task_Priority: 2, Task_Completion: 30, Task_Parent_ID: 23, }, { Task_ID: 163, Task_Assigned_Employee_ID: 7, Task_Owner_ID: 27, Task_Subject: 'Approve Benefits Upgrade Package', Task_Start_Date: '2016-03-26T00:00:00', Task_Due_Date: '2016-03-27T00:00:00', Task_Status: 'Deferred', Task_Priority: 2, Task_Completion: 0, Task_Parent_ID: 23, }, { Task_ID: 164, Task_Assigned_Employee_ID: 5, Task_Owner_ID: 7, Task_Subject: 'Final Budget Review', Task_Start_Date: '2016-03-26T00:00:00', Task_Due_Date: '2016-03-27T00:00:00', Task_Status: 'In Progress', Task_Priority: 4, Task_Completion: 25, Task_Parent_ID: 23, }, { Task_ID: 165, Task_Assigned_Employee_ID: 2, Task_Owner_ID: 1, Task_Subject: 'State of Operations Report', Task_Start_Date: '2016-03-28T00:00:00', Task_Due_Date: '2016-03-31T00:00:00', Task_Status: 'In Progress', Task_Priority: 4, Task_Completion: 45, Task_Parent_ID: 22, }, { Task_ID: 166, Task_Assigned_Employee_ID: 42, Task_Owner_ID: 2, Task_Subject: 'Online Sales Report', Task_Start_Date: '2016-03-29T00:00:00', Task_Due_Date: '2016-03-30T00:00:00', Task_Status: 'In Progress', Task_Priority: 4, Task_Completion: 55, Task_Parent_ID: 22, }, { Task_ID: 167, Task_Assigned_Employee_ID: 13, Task_Owner_ID: 10, Task_Subject: 'Reprint All Shipping Labels', Task_Start_Date: '2016-04-01T00:00:00', Task_Due_Date: '2016-04-10T00:00:00', Task_Status: 'In Progress', Task_Priority: 2, Task_Completion: 10, Task_Parent_ID: 24, }, { Task_ID: 168, Task_Assigned_Employee_ID: 28, Task_Owner_ID: 13, Task_Subject: 'Shipping Label Artwork', Task_Start_Date: '2016-04-02T00:00:00', Task_Due_Date: '2016-04-09T00:00:00', Task_Status: 'In Progress', Task_Priority: 2, Task_Completion: 40, Task_Parent_ID: 24, }, { Task_ID: 169, Task_Assigned_Employee_ID: 13, Task_Owner_ID: 29, Task_Subject: 'Specs for New Shipping Label', Task_Start_Date: '2016-04-04T00:00:00', Task_Due_Date: '2016-04-05T00:00:00', Task_Status: 'Completed', Task_Priority: 2, Task_Completion: 100, Task_Parent_ID: 24, }, { Task_ID: 173, Task_Assigned_Employee_ID: 10, Task_Owner_ID: 14, Task_Subject: 'Approve Rental of Forklift', Task_Start_Date: '2016-04-08T00:00:00', Task_Due_Date: '2016-04-09T00:00:00', Task_Status: 'Need Assistance', Task_Priority: 4, Task_Completion: 0, Task_Parent_ID: 26, }, { Task_ID: 175, Task_Assigned_Employee_ID: 9, Task_Owner_ID: 30, Task_Subject: 'Review Complaint Reports', Task_Start_Date: '2016-04-17T00:00:00', Task_Due_Date: '2016-04-30T00:00:00', Task_Status: 'In Progress', Task_Priority: 4, Task_Completion: 40, Task_Parent_ID: 22, }, { Task_ID: 177, Task_Assigned_Employee_ID: 33, Task_Owner_ID: 37, Task_Subject: 'Test New Automation App', Task_Start_Date: '2016-04-20T00:00:00', Task_Due_Date: '2016-04-30T00:00:00', Task_Status: 'In Progress', Task_Priority: 2, Task_Completion: 80, Task_Parent_ID: 20, }, { Task_ID: 178, Task_Assigned_Employee_ID: 38, Task_Owner_ID: 33, Task_Subject: 'Fix Synchronization Issues', Task_Start_Date: '2016-04-21T00:00:00', Task_Due_Date: '2016-04-21T00:00:00', Task_Status: 'Completed', Task_Priority: 4, Task_Completion: 100, Task_Parent_ID: 20, }, { Task_ID: 180, Task_Assigned_Employee_ID: 9, Task_Owner_ID: 30, Task_Subject: 'Support Team Evaluation Report', Task_Start_Date: '2016-05-01T00:00:00', Task_Due_Date: '2016-05-07T00:00:00', Task_Status: 'Deferred', Task_Priority: 2, Task_Completion: 0, Task_Parent_ID: 22, }]; export interface Employee { ID: number; Name: string; } const employees: Employee[] = [{ ID: 1, Name: 'John Heart', }, { ID: 2, Name: 'Samantha Bright', }, { ID: 3, Name: 'Arthur Miller', }, { ID: 4, Name: 'Robert Reagan', }, { ID: 5, Name: 'Greta Sims', }, { ID: 6, Name: 'Brett Wade', }, { ID: 7, Name: 'Sandra Johnson', }, { ID: 8, Name: 'Ed Holmes', }, { ID: 9, Name: 'Barb Banks', }, { ID: 10, Name: 'Kevin Carter', }, { ID: 11, Name: 'Cindy Stanwick', }, { ID: 12, Name: 'Sammy Hill', }, { ID: 13, Name: 'Davey Jones', }, { ID: 14, Name: 'Victor Norris', }, { ID: 15, Name: 'Mary Stern', }, { ID: 16, Name: 'Robin Cosworth', }, { ID: 17, Name: 'Kelly Rodriguez', }, { ID: 18, Name: 'James Anderson', }, { ID: 19, Name: 'Antony Remmen', }, { ID: 20, Name: 'Olivia Peyton', }, { ID: 21, Name: 'Taylor Riley', }, { ID: 22, Name: 'Amelia Harper', }, { ID: 23, Name: 'Wally Hobbs', }, { ID: 24, Name: 'Brad Jameson', }, { ID: 25, Name: 'Karen Goodson', }, { ID: 26, Name: 'Marcus Orbison', }, { ID: 27, Name: 'Sandy Bright', }, { ID: 28, Name: 'Morgan Kennedy', }, { ID: 29, Name: 'Violet Bailey', }, { ID: 30, Name: 'Ken Samuelson', }, { ID: 31, Name: 'Nat Maguiree', }, { ID: 32, Name: 'Bart Arnaz', }, { ID: 33, Name: 'Leah Simpson', }, { ID: 34, Name: 'Arnie Schwartz', }, { ID: 35, Name: 'Billy Zimmer', }, { ID: 36, Name: 'Samantha Piper', }, { ID: 37, Name: 'Maggie Boxter', }, { ID: 38, Name: 'Terry Bradley', }, { ID: 39, Name: 'Gabe Jones', }, { ID: 40, Name: 'Lucy Ball', }, { ID: 41, Name: 'Jim Packard', }, { ID: 42, Name: 'Hannah Brookly', }, { ID: 43, Name: 'Harv Mudd', }, { ID: 44, Name: 'Clark Morgan', }, { ID: 45, Name: 'Todd Hoffman', }, { ID: 46, Name: 'Jackie Garmin', }, { ID: 47, Name: 'Lincoln Bartlett', }, { ID: 48, Name: 'Brad Farkus', }, { ID: 49, Name: 'Jenny Hobbs', }, { ID: 50, Name: 'Dallas Lou', }, { ID: 51, Name: 'Stu Pizaro', }]; export interface Priority { id: number; text: string; postfix: string; } const priorities: Priority[] = [{ id: 1, text: 'Low', postfix: 'low', }, { id: 2, text: 'Normal', postfix: 'normal', }, { id: 3, text: 'Urgent', postfix: 'urgent', }, { id: 4, text: 'High', postfix: 'high', }, ]; @Injectable() export class Service { getTasks() { return tasks; } getEmployees() { return employees; } getPriorities() { return priorities; } }

// In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ const componentNames = [ 'accordion', 'action-sheet', 'autocomplete', 'bar-gauge', 'box', 'bullet', 'button-group', 'button', 'calendar', 'card-view', 'chart', 'chat', 'check-box', 'circular-gauge', 'color-box', 'context-menu', 'data-grid', 'date-box', 'date-range-box', 'defer-rendering', 'diagram', 'draggable', 'drawer', 'drop-down-box', 'drop-down-button', 'file-manager', 'file-uploader', 'filter-builder', 'form', 'funnel', 'gallery', 'gantt', 'html-editor', 'linear-gauge', 'list', 'load-indicator', 'load-panel', 'lookup', 'map', 'menu', 'multi-view', 'nested', 'number-box', 'pagination', 'pie-chart', 'pivot-grid-field-chooser', 'pivot-grid', 'polar-chart', 'popover', 'popup', 'progress-bar', 'radio-group', 'range-selector', 'range-slider', 'recurrence-editor', 'resizable', 'responsive-box', 'sankey', 'scheduler', 'scroll-view', 'select-box', 'slider', 'sortable', 'sparkline', 'speed-dial-action', 'splitter', 'stepper', 'switch', 'tab-panel', 'tabs', 'tag-box', 'text-area', 'text-box', 'tile-view', 'toast', 'toolbar', 'tooltip', 'tree-list', 'tree-map', 'tree-view', 'validation-group', 'validation-summary', 'validator', 'vector-map', ]; window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, '@angular/platform-browser-dynamic': { 'esModule': true, }, '@angular/platform-browser': { 'esModule': true, }, '@angular/core': { 'esModule': true, }, '@angular/common': { 'esModule': true, }, '@angular/common/http': { 'esModule': true, }, '@angular/animations': { 'esModule': true, }, '@angular/forms': { 'esModule': true, }, 'openai': { 'esModule': true, }, }, paths: { 'npm:': 'https://cdn.jsdelivr.net/npm/', 'bundles:': '../../../../bundles/', 'externals:': '../../../../bundles/externals/', }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', /* @angular */ '@angular/compiler': 'bundles:@angular/compiler.umd.js', '@angular/platform-browser-dynamic': 'bundles:@angular/platform-browser-dynamic.umd.js', '@angular/core': 'bundles:@angular/core.umd.js', '@angular/core/primitives/signals': 'bundles:@angular/core.primitives.signals.umd.js', '@angular/common': 'bundles:@angular/common.umd.js', '@angular/common/http': 'bundles:@angular/common-http.umd.js', '@angular/platform-browser': 'bundles:@angular/platform-browser.umd.js', '@angular/platform-browser/animations': 'bundles:@angular/platform-browser.umd.js', '@angular/forms': 'bundles:@angular/forms.umd.js', /* devextreme */ 'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs', 'devextreme-quill': 'npm:devextreme-quill@1.7.6/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.24', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.64', /* devextreme-angular umd maps */ 'devextreme-angular': 'bundles:devextreme-angular/devextreme-angular.umd.js', 'devextreme-angular/common/ai-integration': 'bundles:devextreme-angular/devextreme-angular-common-ai-integration.umd.js', 'devextreme-angular/core': 'bundles:devextreme-angular/devextreme-angular-core.umd.js', 'devextreme-angular/common/charts': 'bundles:devextreme-angular/devextreme-angular-common-charts.umd.js', 'devextreme-angular/common/core/animation': 'bundles:devextreme-angular/devextreme-angular-common-core-animation.umd.js', 'devextreme-angular/common/core/environment': 'bundles:devextreme-angular/devextreme-angular-common-core-environment.umd.js', 'devextreme-angular/common/core/events': 'bundles:devextreme-angular/devextreme-angular-common-core-events.umd.js', 'devextreme-angular/common/core/localization': 'bundles:devextreme-angular/devextreme-angular-common-core-localization.umd.js', 'devextreme-angular/common/core': 'bundles:devextreme-angular/devextreme-angular-common-core.umd.js', 'devextreme-angular/common/data/custom-store': 'bundles:devextreme-angular/devextreme-angular-common-data-custom-store.umd.js', 'devextreme-angular/common/data': 'bundles:devextreme-angular/devextreme-angular-common-data.umd.js', 'devextreme-angular/common/export/excel': 'bundles:devextreme-angular/devextreme-angular-common-export-excel.umd.js', 'devextreme-angular/common/export/pdf': 'bundles:devextreme-angular/devextreme-angular-common-export-pdf.umd.js', 'devextreme-angular/common/export': 'bundles:devextreme-angular/devextreme-angular-common-export.umd.js', 'devextreme-angular/common/grids': 'bundles:devextreme-angular/devextreme-angular-common-grids.umd.js', 'devextreme-angular/common': 'bundles:devextreme-angular/devextreme-angular-common.umd.js', 'devextreme-angular/http': 'bundles:devextreme-angular/devextreme-angular-http.umd.js', 'devextreme-angular/core/tokens': 'bundles:devextreme-angular/devextreme-angular-core-tokens.umd.js', ...componentNames.reduce((acc, name) => { acc[`devextreme-angular/ui/${name}`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}.umd.js`; acc[`devextreme-angular/ui/${name}/nested`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}-nested.umd.js`; return acc; }, {}), 'tslib': 'npm:tslib/tslib.js', 'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js', 'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign', 'inferno': 'npm:inferno@8.2.3/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@8.2.3/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', '@preact/signals-core': 'npm:@preact/signals-core@1.8.0/dist/signals-core.min.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/common/core/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, 'rxjs': { defaultExtension: 'js', }, 'rxjs/operators': { defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devexpress-diagram@2.2.24/package.json', 'npm:devexpress-gantt@4.1.64/package.json', ], }; System.config(window.config); // System.import('@angular/compiler').catch(console.error.bind(console)); // eslint-disable-next-line const useTgzInCSB = ['openai']; let packagesInfo = { "@angular/core": { "version": "17.3.12" }, "core-js": { "version": "2.6.12" }, "typescript": { "version": "5.4.5" }, "zone.js": { "version": "0.14.10" } };

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" 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/25.1.7/css/dx.light.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.14.10/bundles/zone.umd.js"></script> <script src="https://cdn.jsdelivr.net/npm/reflect-metadata@0.1.13/Reflect.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>

.header { padding: 18px 24px; font-size: 16px; font-weight: 700; line-height: 20px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

<div class="header" [title]="text"> {{ text }} </div>

import { Component, Input } from '@angular/core'; let modulePrefix = ''; // @ts-ignore if (window && window.config?.packageConfigPaths) { modulePrefix = '/app'; } @Component({ selector: 'card-header', templateUrl: `app/card-header/card-header.component.html`, styleUrls: [`app/card-header/card-header.component.css`], }) export class CardHeader { @Input() text: string; }

button { background: none; border: none; padding: 0; color: var(--dx-color-link); text-decoration: underline; cursor: pointer; font: inherit; }

<button>{{ text }}</button>

import { Component, Input, OnChanges } from '@angular/core'; import { Employee, Service } from '../app.service'; let modulePrefix = ''; // @ts-ignore if (window && window.config?.packageConfigPaths) { modulePrefix = '/app'; } @Component({ selector: 'employee', templateUrl: `app/employee/employee.component.html`, styleUrls: [`app/employee/employee.component.css`], }) export class EmployeeComponent implements OnChanges { employees: Employee[]; text: string; @Input() employeeID: number; constructor(service: Service) { this.employees = service.getEmployees(); } ngOnChanges(): void { const employee = this.employees.find(e => e.ID === this.employeeID); this.text = employee.Name; } }

.priority { display: flex; align-items: center; } .priority--low { color: var(--dx-color-success); } .priority--normal { color: var(--dx-color-primary); } .priority--urgent { color: #f7630c; } .priority--high { color: var(--dx-color-danger); } .indicator { background-color: currentcolor; margin-right: 8px; border-radius: 50%; height: 12px; width: 12px; }

<div [class]="className"> <div class="indicator"></div> <div>{{ text }}</div> </div>

import { Component, Input, OnChanges } from '@angular/core'; import { Priority, Service } from '../app.service'; let modulePrefix = ''; // @ts-ignore if (window && window.config?.packageConfigPaths) { modulePrefix = '/app'; } @Component({ selector: 'priority', templateUrl: `app/priority/priority.component.html`, styleUrls: [`app/priority/priority.component.css`], }) export class PriorityComponent implements OnChanges { priorities: Priority[]; text: string; className: string; @Input() priorityID: number; constructor(service: Service) { this.priorities = service.getPriorities(); } ngOnChanges(): void { const priority = this.priorities.find(p => p.id === this.priorityID); this.text = priority.text; this.className = `priority priority--${priority.postfix}`; } }

:host { display: block; padding-top: 4px; }

<dx-progress-bar [value]="value" [elementAttr]="{ 'aria-label': 'Progress Bar' }" [statusFormat]="getStatusFormat" />

import { Component, Input } from '@angular/core'; let modulePrefix = ''; // @ts-ignore if (window && window.config?.packageConfigPaths) { modulePrefix = '/app'; } @Component({ selector: 'progress-bar', templateUrl: `app/progress-bar/progress-bar.component.html`, styleUrls: [`app/progress-bar/progress-bar.component.css`], }) export class ProgressComponent { @Input() value: number; getStatusFormat(_, value: number): string { return `${value}%`; } }