From 3afa45ba13de740f901cf1309c7e32e169b02c50 Mon Sep 17 00:00:00 2001
From: VenkateshwaranSaravanakumar
<107187632+VenkateshwaranSaravanakumar@users.noreply.github.com>
Date: Tue, 23 Jul 2024 20:44:22 +0530
Subject: [PATCH 1/3] Updated Angular Listbox getting started sample
---
.editorconfig | 16 ++++++++++++++++
.gitignore | 42 ++++++++++++++++++++++++++++++++++++++++++
package.json | 40 ++++++++++++++++++++++++++++++++++++++++
tsconfig.app.json | 15 +++++++++++++++
tsconfig.json | 33 +++++++++++++++++++++++++++++++++
tsconfig.spec.json | 15 +++++++++++++++
6 files changed, 161 insertions(+)
create mode 100644 .editorconfig
create mode 100644 .gitignore
create mode 100644 package.json
create mode 100644 tsconfig.app.json
create mode 100644 tsconfig.json
create mode 100644 tsconfig.spec.json
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..923742d
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..70583d7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..206a7a9
--- /dev/null
+++ b/package.json
@@ -0,0 +1,40 @@
+{
+ "name": "angular-listbox-getting-started",
+ "version": "0.0.0",
+ "scripts": {
+ "ng": "ng",
+ "start": "ng serve",
+ "build": "ng build",
+ "watch": "ng build --watch --configuration development",
+ "test": "ng test"
+ },
+ "private": true,
+ "dependencies": {
+ "@angular/animations": "^18.0.0",
+ "@angular/common": "^18.0.0",
+ "@angular/compiler": "^18.0.0",
+ "@angular/core": "^18.0.0",
+ "@angular/forms": "^18.0.0",
+ "@angular/platform-browser": "^18.0.0",
+ "@angular/platform-browser-dynamic": "^18.0.0",
+ "@angular/router": "^18.0.0",
+ "@syncfusion/ej2-angular-buttons": "^26.1.40",
+ "@syncfusion/ej2-angular-dropdowns": "^26.1.40",
+ "rxjs": "~7.8.0",
+ "tslib": "^2.3.0",
+ "zone.js": "~0.14.3"
+ },
+ "devDependencies": {
+ "@angular-devkit/build-angular": "^18.0.7",
+ "@angular/cli": "^18.0.7",
+ "@angular/compiler-cli": "^18.0.0",
+ "@types/jasmine": "~5.1.0",
+ "jasmine-core": "~5.1.0",
+ "karma": "~6.4.0",
+ "karma-chrome-launcher": "~3.2.0",
+ "karma-coverage": "~2.2.0",
+ "karma-jasmine": "~5.1.0",
+ "karma-jasmine-html-reporter": "~2.1.0",
+ "typescript": "~5.4.2"
+ }
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..7a775bd
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./out-tsc/app",
+ "types": []
+ },
+ "files": [
+ "src/main.ts"
+ ],
+ "include": [
+ "src/**/*.d.ts"
+ ]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..0ad2503
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,33 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "outDir": "./dist/out-tsc",
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "sourceMap": true,
+ "declaration": false,
+ "experimentalDecorators": true,
+ "moduleResolution": "bundler",
+ "importHelpers": true,
+ "target": "ES2022",
+ "module": "ES2022",
+ "useDefineForClassFields": false,
+ "lib": [
+ "ES2022",
+ "dom"
+ ]
+ },
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true
+ }
+}
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
new file mode 100644
index 0000000..8591662
--- /dev/null
+++ b/tsconfig.spec.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./out-tsc/spec",
+ "types": [
+ "jasmine"
+ ]
+ },
+ "include": [
+ "src/**/*.spec.ts",
+ "src/**/*.d.ts"
+ ]
+}
From 03c23d5631379e16d1d5e6d74a60f806f7169366 Mon Sep 17 00:00:00 2001
From: VenkateshwaranSaravanakumar
<107187632+VenkateshwaranSaravanakumar@users.noreply.github.com>
Date: Tue, 23 Jul 2024 20:46:26 +0530
Subject: [PATCH 2/3] Updated source files
---
src/app/app.component.css | 0
src/app/app.component.html | 3 +++
src/app/app.component.spec.ts | 29 +++++++++++++++++++++++++++++
src/app/app.component.ts | 34 ++++++++++++++++++++++++++++++++++
src/app/app.config.ts | 8 ++++++++
src/app/app.routes.ts | 3 +++
src/index.html | 13 +++++++++++++
src/main.ts | 12 ++++++++++++
src/styles.css | 10 ++++++++++
9 files changed, 112 insertions(+)
create mode 100644 src/app/app.component.css
create mode 100644 src/app/app.component.html
create mode 100644 src/app/app.component.spec.ts
create mode 100644 src/app/app.component.ts
create mode 100644 src/app/app.config.ts
create mode 100644 src/app/app.routes.ts
create mode 100644 src/index.html
create mode 100644 src/main.ts
create mode 100644 src/styles.css
diff --git a/src/app/app.component.css b/src/app/app.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/app.component.html b/src/app/app.component.html
new file mode 100644
index 0000000..3fc8712
--- /dev/null
+++ b/src/app/app.component.html
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
new file mode 100644
index 0000000..fd1a1e5
--- /dev/null
+++ b/src/app/app.component.spec.ts
@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [AppComponent],
+ }).compileComponents();
+ });
+
+ it('should create the app', () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.componentInstance;
+ expect(app).toBeTruthy();
+ });
+
+ it(`should have the 'angular-listbox-getting-started' title`, () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.componentInstance;
+ expect(app.title).toEqual('angular-listbox-getting-started');
+ });
+
+ it('should render title', () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ fixture.detectChanges();
+ const compiled = fixture.nativeElement as HTMLElement;
+ expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-listbox-getting-started');
+ });
+});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
new file mode 100644
index 0000000..1e6113a
--- /dev/null
+++ b/src/app/app.component.ts
@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { ListBoxComponent, ListBoxModule, CheckBoxSelection } from '@syncfusion/ej2-angular-dropdowns';
+import { ButtonComponent } from '@syncfusion/ej2-angular-buttons'
+
+ListBoxComponent.Inject(CheckBoxSelection);
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [RouterOutlet, ListBoxModule ],
+ templateUrl: './app.component.html',
+ styleUrl: './app.component.css'
+})
+export class AppComponent {
+ public data: { [key: string]: Object }[] = [
+ { id: 'game1', sports: 'Badminton' },
+ { id: 'game2', sports: 'Cricket'},
+ { id: 'game3', sports: 'Football'},
+ { id: 'game4', sports: 'Golf'},
+ { id: 'game5', sports: 'Tennis'},
+ { id: 'game6', sports: 'Basket Ball'},
+ { id: 'game7', sports: 'Base Ball'},
+ { id: 'game8', sports: 'Hockey'},
+ { id: 'game9', sports: 'Volley Ball'}
+];
+
+public fieldSettings = {
+ text: "sports",
+ value: "id"
+ }
+
+ public selection = { mode: "Single", showCheckbox: false }
+}
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
new file mode 100644
index 0000000..460a570
--- /dev/null
+++ b/src/app/app.config.ts
@@ -0,0 +1,8 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+ providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+};
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
new file mode 100644
index 0000000..4f3af40
--- /dev/null
+++ b/src/app/app.routes.ts
@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..62741a7
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ AngularListboxGettingStarted
+
+
+
+
+
+
+
+
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..0472d83
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,12 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+
+
+import { registerLicense } from '@syncfusion/ej2-base';
+
+registerLicense('ORg4AjUWIQA/Gnt2U1hhQlJBfVddXHxLflFyVWtTfl16d1FWESFaRnZdRl1kSXtTfkdjW3dZdndV')
+
+bootstrapApplication(AppComponent, appConfig)
+ .catch((err) => console.error(err));
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..3c955f1
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,10 @@
+/* You can add global styles to this file, and also import other style files */
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+
+.container{
+ margin-left: 550px;
+ margin-top: 100px;
+ width: 300px;
+}
\ No newline at end of file
From 9c2b48f947ab06bbf007a4c3292c42334f4cd783 Mon Sep 17 00:00:00 2001
From: VenkateshwaranSaravanakumar
<107187632+VenkateshwaranSaravanakumar@users.noreply.github.com>
Date: Tue, 23 Jul 2024 20:48:55 +0530
Subject: [PATCH 3/3] Updated Readme file
---
README.md | 17 +++++++++++++++--
1 file changed, 15 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index 8db4591..b6c5a21 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,15 @@
-# getting-started-with-the-angular-listbox-component
-A quick-start Angular project that shows how to add the Angular Listbox Component to a Angular app. This project contains code to add few of the control’s basic features, like binding data and selecting items.
+# Getting started with the Angular Listbox Component
+
+A quick-start Angular project that shows how to add the Angular Listbox Component to a Angular app. This project contains code to add few of the control’s basic features, like binding data and selecting items.
+
+Refer to the following documentation to learn about the Angular Dashboard Layout component:
+https://ej2.syncfusion.com/angular/documentation/list-box/getting-started
+
+Check out this online example of the Angular Dashboard Layout component:
+https://ej2.syncfusion.com/angular/demos/#/bootstrap5/list-box/default
+
+## Project prerequisites
+Make sure that you have the compatible versions of [Visual Studio Code](https://code.visualstudio.com/download ) and [NodeJS](https://nodejs.org/en/download) or later version in your machine before starting to work on this project.
+
+## How to run this application
+To run this application, you need to first clone the `getting-started-with-the-angular-listbox-component` repository and then open it in Visual Studio Code. Now, simply build and run your project using `npm start` command to view the output
\ No newline at end of file