Local Reordering

import { NgModule, Component, enableProdMode, ViewChild } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxDataGridModule, DxCheckBoxModule } from 'devextreme-angular'; import { Service, Employee, Task, Status } from './app.service'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], providers: [Service] }) export class AppComponent { tasks: Array<Task>; employees: Array<Employee>; statuses: Array<Status>; showDragIcons: boolean; constructor(service: Service) { this.tasks = service.getTasks(); this.employees = service.getEmployees(); this.statuses = service.getStatuses(); this.showDragIcons = true; this.onReorder = this.onReorder.bind(this); } onReorder(e) { var visibleRows = e.component.getVisibleRows(), toIndex = this.tasks.indexOf(visibleRows[e.toIndex].data), fromIndex = this.tasks.indexOf(e.itemData); this.tasks.splice(fromIndex, 1); this.tasks.splice(toIndex, 0, e.itemData); } } @NgModule({ imports: [ BrowserModule, DxDataGridModule, DxCheckBoxModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);

.options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { width: 24%; display: inline-block; margin-top: 10px; }

import { Injectable } from '@angular/core'; export class Task { ID: number; Subject: string; Status: number; Owner: number; AssignedEmployee: Array<number>; OrderIndex: number; Priority: number; } export class Employee { ID: number; FullName: string; Department: string; Title: string; } export class Status { id: number; name: string; } let employees = [{ ID: 1, FullName: "John Heart", Department: "Management", Title: "CEO", }, { ID: 2, FullName: "Samantha Bright", Department: "Management", Title: "COO", }, { ID: 3, FullName: "Arthur Miller", Department: "Management", Title: "CTO", }, { ID: 4, FullName: "Robert Reagan", Department: "Management", Title: "CMO", }, { ID: 5, FullName: "Greta Sims", Department: "Human Resources", Title: "HR Manager", }, { ID: 6, FullName: "Brett Wade", Department: "IT", Title: "IT Manager", }, { ID: 7, FullName: "Sandra Johnson", Department: "Human Resources", Title: "Controller", }, { ID: 8, FullName: "Ed Holmes", Department: "Sales", Title: "Sales Manager", }, { ID: 9, FullName: "Barb Banks", Department: "Support", Title: "Support Manager", }, { ID: 10, FullName: "Kevin Carter", Department: "Shipping", Title: "Shipping Manager", }, { ID: 11, FullName: "Cindy Stanwick", Department: "Human Resources", Title: "HR Assistant", }, { ID: 12, FullName: "Sammy Hill", Department: "Sales", Title: "Sales Assistant", }, { ID: 13, FullName: "Davey Jones", Department: "Shipping", Title: "Shipping Assistant", }, { ID: 14, FullName: "Victor Norris", Department: "Shipping", Title: "Shipping Assistant", }, { ID: 15, FullName: "Mary Stern", Department: "Shipping", Title: "Shipping Assistant", }, { ID: 16, FullName: "Robin Cosworth", Department: "Shipping", Title: "Shipping Assistant", }, { ID: 17, FullName: "Kelly Rodriguez", Department: "Support", Title: "Support Assistant", }, { ID: 18, FullName: "James Anderson", Department: "Support", Title: "Support Assistant", }, { ID: 19, FullName: "Antony Remmen", Department: "Support", Title: "Support Assistant", }, { ID: 20, FullName: "Olivia Peyton", Department: "Sales", Title: "Sales Assistant", }, { ID: 21, FullName: "Taylor Riley", Department: "IT", Title: "Network Admin", }, { ID: 22, FullName: "Amelia Harper", Department: "IT", Title: "Network Admin", }, { ID: 23, FullName: "Wally Hobbs", Department: "IT", Title: "Programmer", }, { ID: 24, FullName: "Brad Jameson", Department: "IT", Title: "Programmer", }, { ID: 25, FullName: "Karen Goodson", Department: "IT", Title: "Programmer", }, { ID: 26, FullName: "Marcus Orbison", Department: "Human Resources", Title: "Travel Coordinator", }, { ID: 27, FullName: "Sandy Bright", Department: "Human Resources", Title: "Benefits Coordinator", }, { ID: 28, FullName: "Morgan Kennedy", Department: "IT", Title: "Graphic Designer", }, { ID: 29, FullName: "Violet Bailey", Department: "IT", Title: "Jr Graphic Designer", }, { ID: 30, FullName: "Ken Samuelson", Department: "Human Resources", Title: "Ombudsman", }, { ID: 31, FullName: "Nat Maguiree", Department: "Support", Title: "Trainer", }, { ID: 32, FullName: "Bart Arnaz", Department: "Engineering", Title: "Director of Engineering", }, { ID: 33, FullName: "Leah Simpson", Department: "Engineering", Title: "Test Coordinator", }, { ID: 34, FullName: "Arnie Schwartz", Department: "Engineering", Title: "Engineer", }, { ID: 35, FullName: "Billy Zimmer", Department: "Engineering", Title: "Engineer", }, { ID: 36, FullName: "Samantha Piper", Department: "Engineering", Title: "Engineer", }, { ID: 37, FullName: "Maggie Boxter", Department: "Engineering", Title: "Engineer", }, { ID: 38, FullName: "Terry Bradley", Department: "Engineering", Title: "QA Engineer", }, { ID: 39, FullName: "Gabe Jones", Department: "Support", Title: "Retail Coordinator", }, { ID: 40, FullName: "Lucy Ball", Department: "Sales", Title: "Sales Assistant", }, { ID: 41, FullName: "Jim Packard", Department: "Sales", Title: "Retail Sales Manager", }, { ID: 42, FullName: "Hannah Brookly", Department: "Sales", Title: "Online Sales Manager", }, { ID: 43, FullName: "Harv Mudd", Department: "Sales", Title: "Retail Sales Manager", }, { ID: 44, FullName: "Clark Morgan", Department: "Sales", Title: "Retail Sales Manager", }, { ID: 45, FullName: "Todd Hoffman", Department: "Sales", Title: "Retail Sales Manager", }, { ID: 46, FullName: "Jackie Garmin", Department: "Support", Title: "Support Assistant", }, { ID: 47, FullName: "Lincoln Bartlett", Department: "Sales", Title: "Sales Assistant", }, { ID: 48, FullName: "Brad Farkus", Department: "Engineering", Title: "Engineer", }, { ID: 49, FullName: "Jenny Hobbs", Department: "Shipping", Title: "Shipping Assistant", }, { ID: 50, FullName: "Dallas Lou", Department: "Shipping", Title: "Shipping Assistant", }, { ID: 51, FullName: "Stu Pizaro", Department: "Engineering", Title: "Engineer", }], statuses = [{ id: 1, name: "Not Started" }, { id: 2, name: "In Progress" }, { id: 3, name: "Deferred" }, { id: 4, name: "Need Assistance" }, { id: 5, name: "Completed" }], tasks = [{ ID: 1, Subject: "Prepare 2013 Financial", Status: 5, Owner: 1, AssignedEmployee: 7, OrderIndex: 0, Priority: 3 }, { ID: 2, Subject: "Prepare 2013 Marketing Plan", Status: 5, Owner: 1, AssignedEmployee: 4, OrderIndex: 1, Priority: 4 }, { ID: 3, Subject: "Update Personnel Files", Status: 5, Owner: 1, AssignedEmployee: 2, OrderIndex: 2, Priority: 1 }, { ID: 4, Subject: "Review Health Insurance Options Under the Affordable Care Act", Status: 1, Owner: 1, AssignedEmployee: 2, OrderIndex: 3, Priority: 4 }, { ID: 5, Subject: "Choose between PPO and HMO Health Plan", Status: 4, Owner: 2, AssignedEmployee: 1, OrderIndex: 4, Priority: 3 }, { ID: 6, Subject: "Google AdWords Strategy", Status: 1, Owner: 4, AssignedEmployee: 1, OrderIndex: 5, Priority: 2 }, { ID: 7, Subject: "New Brochures", Status: 1, Owner: 4, AssignedEmployee: 1, OrderIndex: 6, Priority: 1 }, { ID: 8, Subject: "2013 Brochure Designs", Status: 1, Owner: 1, AssignedEmployee: 28, OrderIndex: 7, Priority: 1 }, { ID: 9, Subject: "Brochure Design Review", Status: 1, Owner: 28, AssignedEmployee: 29, OrderIndex: 8, Priority: 1 }, { ID: 10, Subject: "Website Re-Design Plan", Status: 5, Owner: 28, AssignedEmployee: 29, OrderIndex: 9, Priority: 2 }, { ID: 11, Subject: "Rollout of New Website and Marketing Brochures", Status: 5, Owner: 1, AssignedEmployee: 4, OrderIndex: 10, Priority: 2 }, { ID: 12, Subject: "Update Sales Strategy Documents", Status: 5, Owner: 4, AssignedEmployee: 8, OrderIndex: 11, Priority: 2 }, { ID: 13, Subject: "Create 2012 Sales Report", Status: 5, Owner: 8, AssignedEmployee: 41, OrderIndex: 12, Priority: 4 }, { ID: 14, Subject: "Direct vs Online Sales Comparison Report", Status: 5, Owner: 41, AssignedEmployee: 42, OrderIndex: 13, Priority: 3 }, { ID: 15, Subject: "Review 2012 Sales Report and Approve 2013 Plans", Status: 5, Owner: 41, AssignedEmployee: 4, OrderIndex: 14, Priority: 3 }, { ID: 16, Subject: "Deliver R&D Plans for 2013", Status: 2, Owner: 1, AssignedEmployee: 3, OrderIndex: 15, Priority: 2 }, { ID: 17, Subject: "Create 2013 R&D Plans", Status: 5, Owner: 3, AssignedEmployee: 32, OrderIndex: 16, Priority: 0 }, { ID: 18, Subject: "2013 QA Strategy Report", Status: 5, Owner: 32, AssignedEmployee: 33, OrderIndex: 17, Priority: 0 }, { ID: 19, Subject: "2013 Training Events", Status: 5, Owner: 33, AssignedEmployee: 31, OrderIndex: 18, Priority: 0 }, { ID: 20, Subject: "Approve Hiring of John Jeffers", Status: 5, Owner: 31, AssignedEmployee: 5, OrderIndex: 19, Priority: 0 }, { ID: 21, Subject: "Non-Compete Agreements", Status: 5, Owner: 5, AssignedEmployee: 2, OrderIndex: 20, Priority: 0 }, { ID: 22, Subject: "Update NDA Agreement", Status: 5, Owner: 2, AssignedEmployee: 1, OrderIndex: 21, Priority: 0 }, { ID: 23, Subject: "Update Employee Files with New NDA", Status: 1, Owner: 2, AssignedEmployee: 5, OrderIndex: 22, Priority: 3 }, { ID: 24, Subject: "Sign Updated NDA", Status: 5, Owner: 5, AssignedEmployee: 6, OrderIndex: 23, Priority: 0 }, { ID: 25, Subject: "Sign Updated NDA", Status: 5, Owner: 5, AssignedEmployee: 7, OrderIndex: 24, Priority: 0 }, { ID: 26, Subject: "Sign Updated NDA", Status: 1, Owner: 5, AssignedEmployee: 8, OrderIndex: 25, Priority: 1 }, { ID: 27, Subject: "Sign Updated NDA", Status: 4, Owner: 5, AssignedEmployee: 9, OrderIndex: 26, Priority: 0 }, { ID: 28, Subject: "Submit Questions Regarding New NDA", Status: 1, Owner: 9, AssignedEmployee: 17, OrderIndex: 27, Priority: 1 }, { ID: 29, Subject: "Submit Questions Regarding New NDA", Status: 1, Owner: 9, AssignedEmployee: 18, OrderIndex: 28, Priority: 1 }, { ID: 30, Subject: "Submit Questions Regarding New NDA", Status: 4, Owner: 9, AssignedEmployee: 19, OrderIndex: 29, Priority: 0 }, { ID: 31, Subject: "Submit Signed NDA", Status: 5, Owner: 10, AssignedEmployee: 14, OrderIndex: 30, Priority: 0 }, { ID: 32, Subject: "Submit Signed NDA", Status: 5, Owner: 10, AssignedEmployee: 13, OrderIndex: 31, Priority: 0 }, { ID: 33, Subject: "Submit Signed NDA", Status: 5, Owner: 10, AssignedEmployee: 15, OrderIndex: 32, Priority: 0 }, { ID: 34, Subject: "Submit Signed NDA", Status: 5, Owner: 10, AssignedEmployee: 16, OrderIndex: 33, Priority: 0 }, { ID: 35, Subject: "Update Revenue Projections", Status: 5, Owner: 1, AssignedEmployee: 7, OrderIndex: 34, Priority: 0 }, { ID: 36, Subject: "Review Revenue Projections", Status: 5, Owner: 7, AssignedEmployee: 8, OrderIndex: 35, Priority: 0 }, { ID: 37, Subject: "Comment on Revenue Projections", Status: 5, Owner: 7, AssignedEmployee: 41, OrderIndex: 36, Priority: 0 }, { ID: 38, Subject: "Comment on Revenue Projections", Status: 5, Owner: 7, AssignedEmployee: 42, OrderIndex: 37, Priority: 0 }, { ID: 39, Subject: "Comment on Revenue Projections", Status: 1, Owner: 7, AssignedEmployee: 45, OrderIndex: 38, Priority: 2 }, { ID: 40, Subject: "Provide New Health Insurance Docs", Status: 5, Owner: 11, AssignedEmployee: 5, OrderIndex: 39, Priority: 0 }, { ID: 41, Subject: "Review Changes to Health Insurance Coverage", Status: 5, Owner: 11, AssignedEmployee: 10, OrderIndex: 40, Priority: 0 }, { ID: 42, Subject: "Scan Health Insurance Forms", Status: 5, Owner: 10, AssignedEmployee: 14, OrderIndex: 41, Priority: 0 }, { ID: 43, Subject: "Sign Health Insurance Forms", Status: 5, Owner: 14, AssignedEmployee: 15, OrderIndex: 42, Priority: 0 }, { ID: 44, Subject: "Sign Health Insurance Forms", Status: 5, Owner: 14, AssignedEmployee: 13, OrderIndex: 43, Priority: 0 }, { ID: 45, Subject: "Sign Health Insurance Forms", Status: 3, Owner: 14, AssignedEmployee: 16, OrderIndex: 44, Priority: 0 }, { ID: 46, Subject: "Follow up with West Coast Stores", Status: 1, Owner: 9, AssignedEmployee: 18, OrderIndex: 45, Priority: 3 }, { ID: 47, Subject: "Follow up with East Coast Stores", Status: 1, Owner: 9, AssignedEmployee: 17, OrderIndex: 46, Priority: 3 }, { ID: 48, Subject: "Send Email to Customers about Recall", Status: 5, Owner: 9, AssignedEmployee: 19, OrderIndex: 47, Priority: 0 }, { ID: 49, Subject: "Submit Refund Report for 2013 Recall", Status: 5, Owner: 7, AssignedEmployee: 9, OrderIndex: 48, Priority: 0 }, { ID: 50, Subject: "Give Final Approval for Refunds", Status: 5, Owner: 7, AssignedEmployee: 2, OrderIndex: 49, Priority: 0 }, { ID: 51, Subject: "Prepare Product Recall Report", Status: 5, Owner: 3, AssignedEmployee: 32, OrderIndex: 50, Priority: 0 }, { ID: 52, Subject: "Review Product Recall Report by Engineering Team", Status: 5, Owner: 3, AssignedEmployee: 1, OrderIndex: 51, Priority: 0 }, { ID: 53, Subject: "Create Training Course for New TVs", Status: 5, Owner: 32, AssignedEmployee: 31, OrderIndex: 52, Priority: 0 }, { ID: 54, Subject: "Review Training Course for any Omissions", Status: 5, Owner: 31, AssignedEmployee: 33, OrderIndex: 53, Priority: 0 }, { ID: 55, Subject: "Review Overtime Report", Status: 5, Owner: 5, AssignedEmployee: 6, OrderIndex: 54, Priority: 0 }, { ID: 56, Subject: "Submit Overtime Request Forms", Status: 5, Owner: 6, AssignedEmployee: 21, OrderIndex: 55, Priority: 0 }, { ID: 57, Subject: "Submit Overtime Request Forms", Status: 5, Owner: 6, AssignedEmployee: 22, OrderIndex: 56, Priority: 0 }, { ID: 58, Subject: "Submit Overtime Request Forms", Status: 5, Owner: 6, AssignedEmployee: 23, OrderIndex: 57, Priority: 0 }, { ID: 59, Subject: "Overtime Approval Guidelines", Status: 5, Owner: 6, AssignedEmployee: 2, OrderIndex: 58, Priority: 0 }, { ID: 60, Subject: "Refund Request Template", Status: 3, Owner: 12, AssignedEmployee: 8, OrderIndex: 59, Priority: 0 }, { ID: 61, Subject: "Recall Rebate Form", Status: 3, Owner: 12, AssignedEmployee: 8, OrderIndex: 60, Priority: 0 }, { ID: 62, Subject: "Create Report on Customer Feedback", Status: 5, Owner: 30, AssignedEmployee: 12, OrderIndex: 61, Priority: 0 }, { ID: 63, Subject: "Review Customer Feedback Report", Status: 5, Owner: 30, AssignedEmployee: 8, OrderIndex: 62, Priority: 0 }, { ID: 64, Subject: "Customer Feedback Report Analysis", Status: 3, Owner: 8, AssignedEmployee: 1, OrderIndex: 63, Priority: 0 }, { ID: 65, Subject: "Prepare Shipping Cost Analysis Report", Status: 5, Owner: 8, AssignedEmployee: 10, OrderIndex: 64, Priority: 0 }, { ID: 66, Subject: "Provide Feedback on Shippers", Status: 5, Owner: 10, AssignedEmployee: 13, OrderIndex: 65, Priority: 0 }, { ID: 67, Subject: "Provide Feedback on Shippers", Status: 5, Owner: 10, AssignedEmployee: 15, OrderIndex: 66, Priority: 0 }, { ID: 68, Subject: "Provide Feedback on Shippers", Status: 5, Owner: 10, AssignedEmployee: 16, OrderIndex: 67, Priority: 0 }, { ID: 69, Subject: "Select Preferred Shipper", Status: 5, Owner: 10, AssignedEmployee: 2, OrderIndex: 68, Priority: 0 }, { ID: 70, Subject: "Complete Shipper Selection Form", Status: 3, Owner: 2, AssignedEmployee: 1, OrderIndex: 69, Priority: 0 }, { ID: 71, Subject: "Upgrade Server Hardware", Status: 5, Owner: 22, AssignedEmployee: 6, OrderIndex: 70, Priority: 0 }, { ID: 72, Subject: "Upgrade Personal Computers", Status: 4, Owner: 21, AssignedEmployee: 6, OrderIndex: 71, Priority: 0 }, { ID: 73, Subject: "Approve Personal Computer Upgrade Plan", Status: 5, Owner: 6, AssignedEmployee: 2, OrderIndex: 72, Priority: 0 }, { ID: 74, Subject: "Decide on Mobile Devices to Use in the Field", Status: 5, Owner: 6, AssignedEmployee: 3, OrderIndex: 73, Priority: 0 }, { ID: 75, Subject: "Upgrade Apps to Windows RT or stay with WinForms", Status: 5, Owner: 24, AssignedEmployee: 6, OrderIndex: 74, Priority: 0 }, { ID: 76, Subject: "Estimate Time Required to Touch-Enable Apps", Status: 5, Owner: 24, AssignedEmployee: 25, OrderIndex: 75, Priority: 0 }, { ID: 77, Subject: "Report on Tranistion to Touch-Based Apps", Status: 5, Owner: 6, AssignedEmployee: 23, OrderIndex: 76, Priority: 0 }, { ID: 78, Subject: "Try New Touch-Enabled WinForms Apps", Status: 5, Owner: 6, AssignedEmployee: 3, OrderIndex: 77, Priority: 0 }, { ID: 79, Subject: "Rollout New Touch-Enabled WinForms Apps", Status: 4, Owner: 6, AssignedEmployee: 24, OrderIndex: 78, Priority: 0 }, { ID: 80, Subject: "Site Up-Time Report", Status: 5, Owner: 3, AssignedEmployee: 6, OrderIndex: 79, Priority: 0 }, { ID: 81, Subject: "Review Site Up-Time Report", Status: 5, Owner: 3, AssignedEmployee: 4, OrderIndex: 80, Priority: 0 }, { ID: 82, Subject: "Review Online Sales Report", Status: 5, Owner: 4, AssignedEmployee: 1, OrderIndex: 81, Priority: 0 }, { ID: 83, Subject: "Determine New Online Marketing Strategy", Status: 5, Owner: 4, AssignedEmployee: 8, OrderIndex: 82, Priority: 0 }, { ID: 84, Subject: "New Online Marketing Strategy", Status: 5, Owner: 8, AssignedEmployee: 42, OrderIndex: 83, Priority: 0 }, { ID: 85, Subject: "Approve New Online Marketing Strategy", Status: 5, Owner: 8, AssignedEmployee: 4, OrderIndex: 84, Priority: 0 }, { ID: 86, Subject: "Submit New Website Design", Status: 5, Owner: 8, AssignedEmployee: 28, OrderIndex: 85, Priority: 0 }, { ID: 87, Subject: "Create Icons for Website", Status: 5, Owner: 28, AssignedEmployee: 29, OrderIndex: 86, Priority: 0 }, { ID: 88, Subject: "Review PSDs for New Website", Status: 5, Owner: 28, AssignedEmployee: 6, OrderIndex: 87, Priority: 0 }, { ID: 89, Subject: "Create New Shopping Cart", Status: 5, Owner: 6, AssignedEmployee: 24, OrderIndex: 88, Priority: 0 }, { ID: 90, Subject: "Create New Product Pages", Status: 5, Owner: 6, AssignedEmployee: 25, OrderIndex: 89, Priority: 0 }]; @Injectable() export class Service { getTasks(): Task[] { return tasks; } getEmployees(): Employee[] { return employees; } getStatuses(): Status[] { return statuses; } }

// 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/ window.config = { transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, 'devextreme/localization.js': { "esModule": true }, }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.5.3/lib/typescript.js', '@angular': 'npm:@angular', 'tslib': 'npm:tslib@2.3.1/tslib.js', 'rxjs': 'npm:rxjs@6.4.0', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@21.1.6/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@21.1.6/bundles/dx.all.js', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.4.2/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.32', 'devexpress-gantt': 'npm:devexpress-gantt@3.0.14', 'devextreme-angular': 'npm:devextreme-angular@21.1.6', '@devextreme/vdom': 'npm:@devextreme/vdom@1.2.2', 'inferno': 'npm:inferno@7.4.10/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.10/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.10/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom@1.0.7/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.10/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.10/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.10/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.10/dist/inferno-extras.min.js' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, '@devextreme/vdom': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, packageConfigPaths: [ "npm:@devextreme/*/package.json", "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular/*/package.json", "npm:devextreme-angular/ui/*/package.json", "npm:devextreme-angular/package.json", "npm:devexpress-diagram/package.json", "npm:devexpress-gantt/package.json", ] }; System.config(window.config);

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.10.3/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/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>