diff --git a/package.json b/package.json
index 25513978a..1d83c7403 100644
--- a/package.json
+++ b/package.json
@@ -36,13 +36,13 @@
     "angular-in-memory-web-api": "~0.3.0",
     "systemjs": "0.19.40",
     "core-js": "^2.4.1",
-    "rxjs": "5.0.1",
+    "rxjs": "5.4.2",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
     "concurrently": "^3.2.0",
     "lite-server": "^2.2.2",
-    "typescript": "~2.1.0",
+    "typescript": "~3.6.3",
 
     "canonical-path": "0.0.2",
     "tslint": "^3.15.1",
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7fb173cd0..a2349d2fb 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,7 +1,23 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+ import { Draggable, Droppable, DropEventArgs } from '@syncfusion/ej2-base';
 
-@Component({
-  selector: 'my-app',
-  template: `<h1>Hello {{name}}</h1>`,
+ @Component({
+    selector: 'my-app',
+    template:` <div id='container'>
+    <div id='droppable'><p class='drop'>Drop target </p></div>
+    <div id='draggable'><p class='drag'>Draggable Element </p></div>
+    </div> `
 })
-export class AppComponent  { name = 'Angular'; }
+
+export class AppComponent {
+  @ViewChild('droppable',{static: false})element: any;
+  @ViewChild('draggable',{static: false})element1: any;
+    ngAfterViewInit() {
+        let draggable: Draggable = new Draggable(document.getElementById('draggable'), {clone: false});
+        let droppable: Droppable = new Droppable(document.getElementById('droppable'), {
+            drop: (e: DropEventArgs) => {
+                e.droppedElement.querySelector('.drag').textContent = 'Dropped';
+            }
+        });
+    }
+}
diff --git a/src/styles.css b/src/styles.css
index 58e1a7d9a..2d7fa4391 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3,3 +3,39 @@ h1 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 250%;
 }
+#loader {
+  color: #008cff;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+#draggable{ 
+  height: 100px;
+  width:150px;
+  border: 1px solid #cecece;
+  cursor: move;
+  background: #cdffe3;
+  user-select: none;
+  touch-action: none;
+}
+.drag{
+  padding-top: 40px;
+  text-align: center;
+ 
+}
+.drop{
+   padding-top: 23px;
+  text-align: center;
+   
+}
+#droppable{
+   margin: 5px;
+   line-height: 170px;
+   font-size: 14px;
+   width: 250px;
+   border: 1px solid #cecece;
+   background: #f6f6f6;
+   touch-action: none;
+}
diff --git a/src/systemjs.config.js b/src/systemjs.config.js
index 129704a37..81cd62f5d 100644
--- a/src/systemjs.config.js
+++ b/src/systemjs.config.js
@@ -6,25 +6,27 @@
   System.config({
     paths: {
       // paths serve as alias
-      'npm:': 'node_modules/'
+      "angular:": "https://unpkg.com/@angular/",
+      "syncfusion:": "https://cdn.syncfusion.com/ej2/",
     },
     // map tells the System loader where to look for things
     map: {
       // our app is within the app folder
       'app': 'app',
-
+      "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
       // angular bundles
-      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+      '@angular/core': 'angular:core@5.2.10/bundles/core.umd.js',
+        '@angular/common': 'angular:common@5.2.10/bundles/common.umd.js',
+        '@angular/compiler': 'angular:compiler@5.2.10/bundles/compiler.umd.js',
+        '@angular/http': 'angular:http@5.2.10/bundles/http.umd.js',
+        '@angular/forms': 'angular:forms@5.2.10/bundles/forms.umd.js',
+        '@angular/router': 'angular:router@5.2.10/bundles/router.umd.js',
+        '@angular/platform-browser': 'angular:platform-browser@5.2.10/bundles/platform-browser.umd.js',
+        '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic@5.2.10/bundles/platform-browser-dynamic.umd.js',
+        '@angular/material': 'angular:material@5.2.10/bundles/material.umd.js',
+        'rxjs': 'https://unpkg.com/rxjs@5.5.10',
 
       // other libraries
-      'rxjs':                      'npm:rxjs',
       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
     },
     // packages tells the System loader how to load when no filename and/or no extension