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/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 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/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 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" + ] +}