Initial commit

README.md

@@ -0,0 +1,3 @@
+# angular-xhmqf9
+
+[Edit on StackBlitz ⚡️](https://stackblitz.com/edit/angular-xhmqf9)

angular.json

@@ -0,0 +1,101 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+      "demo": {
+        "root": "",
+        "sourceRoot": "",
+        "projectType": "application",
+        "prefix": "app",
+        "schematics": {},
+        "architect": {
+          "build": {
+            "builder": "@angular-devkit/build-angular:browser",
+            "options": {
+              "outputPath": "dist/demo",
+              "index": "index.html",
+              "main": "main.ts",
+              "polyfills": "polyfills.ts",
+              "tsConfig": "tsconfig.app.json",
+              "assets": [
+                "favicon.ico",
+                "assets"
+              ],
+              "styles": [
+
+              ],
+              "scripts": []
+            },
+            "configurations": {
+              "production": {
+                "fileReplacements": [
+                  {
+                    "replace": "src/environments/environment.ts",
+                    "with": "src/environments/environment.prod.ts"
+                  }
+                ],
+                "optimization": true,
+                "outputHashing": "all",
+                "sourceMap": false,
+                "extractCss": true,
+                "namedChunks": false,
+                "aot": true,
+                "extractLicenses": true,
+                "vendorChunk": false,
+                "buildOptimizer": true
+              }
+            }
+          },
+          "serve": {
+            "builder": "@angular-devkit/build-angular:dev-server",
+            "options": {
+              "browserTarget": "demo:build"
+            },
+            "configurations": {
+              "production": {
+                "browserTarget": "demo:build:production"
+              }
+            }
+          },
+          "extract-i18n": {
+            "builder": "@angular-devkit/build-angular:extract-i18n",
+            "options": {
+              "browserTarget": "demo:build"
+            }
+          },
+          "test": {
+            "builder": "@angular-devkit/build-angular:karma",
+            "options": {
+              "main": "src/test.ts",
+              "polyfills": "src/polyfills.ts",
+              "tsConfig": "src/tsconfig.spec.json",
+              "karmaConfig": "src/karma.conf.js",
+              "styles": [
+                "styles.css"
+              ],
+              "scripts": [],
+              "assets": [
+                "src/favicon.ico",
+                "src/assets"
+              ]
+            }
+          },
+          "lint": {
+            "builder": "@angular-devkit/build-angular:tslint",
+            "options": {
+              "tsConfig": [
+                "src/tsconfig.app.json",
+                "src/tsconfig.spec.json"
+              ],
+              "exclude": [
+                "**/node_modules/**"
+              ]
+            }
+          }
+        }
+      }
+    },
+    "defaultProject": "demo"
+  }
+

app.component.html

@@ -0,0 +1,18 @@
+<div >
+
+
+
+        <div class="chips-headers">Input SubCategories</div>
+
+<form class="form-horizontal" 
+		  >
+
+        <input type="text" class="e-input" width="200" />
+        <div class="sample-padding">
+            <ejs-chiplist id="chip-avatar" enableDelete="true" [chips]="chips">
+
+            </ejs-chiplist>
+        </div>
+
+</form>
+</div>

app.component.ts

@@ -0,0 +1,25 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+/**
+ * Default Chips component
+ */
+@Component({
+    selector: 'app-root',
+    templateUrl: 'app.component.html',
+    styleUrls: ['app.component.css'],
+    encapsulation: ViewEncapsulation.None
+})
+
+export class AppComponent {
+    chips:any = [{id:1, text:'Aaaa'}, {id:2, text:'Bbbb'}, {id:3, text:'Cccc'}, {id:4, text:'Dddd'}, ];
+
+
+    addChip(text:string) {
+      this.chips.push({id:null, text:text});
+    }
+
+    submit() {
+
+    }
+
+}

app/app.module.ts

@@ -0,0 +1,16 @@
+import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
+
+import { ChipListModule, CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
+
+import { HttpModule } from '@angular/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from '../app.component';
+
+@NgModule({ declarations: [ AppComponent ], imports: [ ChipListModule, BrowserModule, DropDownListModule, CheckBoxModule], providers: [], bootstrap: [AppComponent]
+})
+export class AppModule { }

data.json

@@ -0,0 +1,44 @@
+{
+  "ddlData": [{
+      "id": "1",
+      "text": "Default"
+    },
+    {
+      "id": "2",
+      "text": "Primary"
+    },
+    {
+      "id": "3",
+      "text": "Success"
+    },
+    {
+      "id": "4",
+      "text": "Danger"
+    },
+    {
+      "id": "5",
+      "text": "Warning"
+    },
+    {
+      "id": "6",
+      "text": "Info"
+    }
+  ],
+  "avatarData": [{
+      "id": "1",
+      "text": "None"
+    },
+    {
+      "id": "2",
+      "text": "Icon"
+    },
+    {
+      "id": "3",
+      "text": "Image"
+    },
+    {
+      "id": "4",
+      "text": "Letter"
+    }
+  ]
+}

environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

environments/environment.ts

@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Window</title>
+<link href="../../styles/OpenNew.css" rel="stylesheet">
+  <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body class="ej2-new"> 
+
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLQL39J"height="0"width="0"style="display:none;visibility:hidden"></iframe></noscript>
+    <div hidden id="sync-analytics" data-queue="EJ2 - Angular - Demos"></div>
+
+  <app-root></app-root>
+</body>
+</html>

main.ts

@@ -0,0 +1,13 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
+

package.json

@@ -0,0 +1,100 @@
+{
+  "name": "7dj6bx.run",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "rxjs": "6.5.2",
+    "core-js": "2.6.9",
+    "zone.js": "0.9.1",
+    "@angular/core": "8.0.0",
+    "@angular/forms": "8.0.0",
+    "@angular/common": "8.0.0",
+    "@angular/router": "8.0.0",
+    "@angular/compiler": "8.0.0",
+    "@angular/platform-browser": "8.0.0",
+    "@angular/platform-browser-dynamic": "8.0.0",
+    "@syncfusion/ej2-base": "17.2.49",
+    "@syncfusion/ej2-buttons": "17.2.47",
+    "@syncfusion/ej2-splitbuttons": "17.2.47",
+    "@syncfusion/ej2-calendars": "17.2.49",
+    "@syncfusion/ej2-charts": "17.2.49",
+    "@syncfusion/ej2-diagrams": "17.2.49",
+    "@syncfusion/ej2-maps": "17.2.47",
+    "@syncfusion/ej2-treemap": "17.2.47",
+    "@syncfusion/ej2-circulargauge": "17.2.47",
+    "@syncfusion/ej2-data": "17.2.47",
+    "@syncfusion/ej2-dropdowns": "17.2.49",
+    "@syncfusion/ej2-grids": "17.2.49",
+    "@syncfusion/ej2-inputs": "17.2.49",
+    "@syncfusion/ej2-lists": "17.2.47",
+    "@syncfusion/ej2-navigations": "17.2.49",
+    "@syncfusion/ej2-popups": "17.2.47",
+    "@syncfusion/ej2-lineargauge": "17.2.47",
+    "@syncfusion/ej2-pdf-export": "17.2.47",
+    "@syncfusion/ej2-compression": "17.2.47",
+    "@syncfusion/ej2-excel-export": "17.2.47",
+    "@syncfusion/ej2-file-utils": "17.2.47",
+    "@syncfusion/ej2-svg-base": "17.2.47",
+    "@syncfusion/ej2-documenteditor": "17.2.49",
+    "@syncfusion/ej2-richtexteditor": "17.2.49",
+    "@syncfusion/ej2-notifications": "17.2.47",
+    "@syncfusion/ej2-heatmap": "17.2.47",
+    "@syncfusion/ej2-pivotview": "17.2.47",
+    "@syncfusion/ej2-schedule": "17.2.49",
+    "@syncfusion/ej2-layouts": "17.2.49",
+    "@syncfusion/ej2-angular-base": "17.2.49",
+    "@syncfusion/ej2-angular-buttons": "17.2.47",
+    "@syncfusion/ej2-angular-splitbuttons": "17.2.47",
+    "@syncfusion/ej2-angular-calendars": "17.2.49",
+    "@syncfusion/ej2-angular-charts": "17.2.49",
+    "@syncfusion/ej2-angular-diagrams": "17.2.49",
+    "@syncfusion/ej2-angular-maps": "17.2.47",
+    "@syncfusion/ej2-angular-treemap": "17.2.47",
+    "@syncfusion/ej2-angular-circulargauge": "17.2.47",
+    "@syncfusion/ej2-angular-dropdowns": "17.2.49",
+    "@syncfusion/ej2-angular-grids": "17.2.49",
+    "@syncfusion/ej2-angular-inputs": "17.2.49",
+    "@syncfusion/ej2-angular-lists": "17.2.47",
+    "@syncfusion/ej2-angular-navigations": "17.2.49",
+    "@syncfusion/ej2-angular-popups": "17.2.47",
+    "@syncfusion/ej2-angular-lineargauge": "17.2.47",
+    "@syncfusion/ej2-angular-documenteditor": "17.2.49",
+    "@syncfusion/ej2-angular-richtexteditor": "17.2.49",
+    "@syncfusion/ej2-angular-notifications": "17.2.47",
+    "@syncfusion/ej2-angular-heatmap": "17.2.47",
+    "@syncfusion/ej2-angular-pivotview": "17.2.47",
+    "@syncfusion/ej2-angular-schedule": "17.2.49",
+    "@syncfusion/ej2-angular-layouts": "17.2.49",
+    "@angular/http": "7.2.15",
+    "rxjs-compat": "6.5.3"
+  },
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.10.0",
+    "@angular/cli": "~7.0.2",
+    "@angular/compiler-cli": "~7.0.0",
+    "@angular/language-service": "~7.0.0",
+    "@types/node": "~8.9.4",
+    "@types/jasmine": "~2.8.8",
+    "@types/jasminewd2": "~2.0.3",
+    "codelyzer": "~4.5.0",
+    "jasmine-core": "~2.99.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~3.0.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~1.1.2",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.4.0",
+    "ts-node": "~7.0.0",
+    "tslint": "~5.11.0",
+    "typescript": "~3.1.1"
+  }
+}