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) { const visibleRows = e.component.getVisibleRows(); const toIndex = this.tasks.findIndex((item) => item.ID === visibleRows[e.toIndex].data.ID); const fromIndex = this.tasks.findIndex((item) => item.ID === e.itemData.ID); 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: number; OrderIndex: number; Priority: number; } export class Employee { ID: number; FullName: string; Department: string; Title: string; } export class Status { id: number; name: string; } const 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', }]; const statuses = [{ id: 1, name: 'Not Started', }, { id: 2, name: 'In Progress', }, { id: 3, name: 'Deferred', }, { id: 4, name: 'Need Assistance', }, { id: 5, name: 'Completed', }]; const 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@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', '@angular/core': 'npm:@angular/core@12.2.17', '@angular/platform-browser': 'npm:@angular/platform-browser@12.2.17', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.17', '@angular/forms': 'npm:@angular/forms@12.2.17', '@angular/common': 'npm:@angular/common@12.2.17', '@angular/compiler': 'npm:@angular/compiler@12.2.17', 'tslib': 'npm:tslib@2.3.1/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@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@22.2.5/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@22.2.5/bundles/dx.all.js', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.20/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.72', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.42', 'devextreme-angular': 'npm:devextreme-angular@22.2.5', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/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', // Prettier 'prettier/standalone': 'npm:prettier@2.8.4/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/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:@devextreme/runtime@3.0.11/inferno/package.json', 'npm:@angular/*/package.json', 'npm:@angular/common@12.2.17/*/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devextreme-angular@22.2.5/*/package.json', 'npm:devextreme-angular@22.2.5/ui/*/package.json', 'npm:devextreme-angular@22.2.5/package.json', 'npm:devexpress-diagram@2.1.72/package.json', 'npm:devexpress-gantt@4.1.42/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/22.2.5/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.12.0/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.13/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>