From d242ecb693fae3c6858cad0dfeed2f7e50a062b0 Mon Sep 17 00:00:00 2001
From: vinoth-Kumar-S <31274282+vinoth-Kumar-S@users.noreply.github.com>
Date: Mon, 12 Jun 2023 16:00:20 +0530
Subject: [PATCH 1/2] Adding Angular Sidebar sample

Adding Angular Sidebar sample
---
 README.md                     |  18 +++++-
 angular.json                  | 100 ++++++++++++++++++++++++++++++++++
 package.json                  |  42 ++++++++++++++
 src/app/app.component.css     |   0
 src/app/app.component.html    |  60 ++++++++++++++++++++
 src/app/app.component.spec.ts |  27 +++++++++
 src/app/app.component.ts      |  52 ++++++++++++++++++
 src/app/app.module.ts         |  21 +++++++
 src/favicon.ico               | Bin 0 -> 948 bytes
 src/index.html                |  13 +++++
 src/main.ts                   |   7 +++
 src/styles.css                |   2 +
 tsconfig.app.json             |  14 +++++
 tsconfig.json                 |  33 +++++++++++
 tsconfig.spec.json            |  14 +++++
 15 files changed, 402 insertions(+), 1 deletion(-)
 create mode 100644 angular.json
 create mode 100644 package.json
 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.module.ts
 create mode 100644 src/favicon.ico
 create mode 100644 src/index.html
 create mode 100644 src/main.ts
 create mode 100644 src/styles.css
 create mode 100644 tsconfig.app.json
 create mode 100644 tsconfig.json
 create mode 100644 tsconfig.spec.json

diff --git a/README.md b/README.md
index 3eb250e..7777617 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,17 @@
-# Getting-started-with-the-Angular-Sidebar-component
\ No newline at end of file
+# Getting Started with the Angular Sidebar Component
+
+A quick-start project to create a new Angular application using the Angular CLI toolchain and add the Syncfusion Stock Chart component to it. This project contains simple code customization, as well as some important features like enabling tooltips and crosshairs.
+
+Refer to the following documentation on the Syncfusion Angular Stock Chart component: 
+https://ej2.syncfusion.com/angular/documentation/stock-chart/getting-started    
+
+Check out this online example of the Angular Stock Chart component: 
+https://ej2.syncfusion.com/angular/demos/#/bootstrap5/stock-chart/default
+
+## Project prerequisites
+
+Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
+
+### How to run this application?
+
+To run this application, you need to clone the `getting-started-with-the-angular-stock-chart-component` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `ng serve` command.
diff --git a/angular.json b/angular.json
new file mode 100644
index 0000000..5d52b4e
--- /dev/null
+++ b/angular.json
@@ -0,0 +1,100 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "myangularproject": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/myangularproject",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css",
+              "./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "myangularproject:build:production"
+            },
+            "development": {
+              "browserTarget": "myangularproject:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "myangularproject:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css",
+              "./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d4036b3
--- /dev/null
+++ b/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "myangularproject",
+  "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": "^16.0.0",
+    "@angular/common": "^16.0.0",
+    "@angular/compiler": "^16.0.0",
+    "@angular/core": "^16.0.0",
+    "@angular/forms": "^16.0.0",
+    "@angular/platform-browser": "^16.0.0",
+    "@angular/platform-browser-dynamic": "^16.0.0",
+    "@angular/router": "^16.0.0",
+    "@syncfusion/ej2-angular-buttons": "^21.2.6",
+    "@syncfusion/ej2-angular-lists": "^21.2.9",
+    "@syncfusion/ej2-angular-navigations": "^21.2.9",
+    "@syncfusion/ej2-material-theme": "~21.2.9",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.13.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^16.0.4",
+    "@angular/cli": "~16.0.4",
+    "@angular/compiler-cli": "^16.0.0",
+    "@types/jasmine": "~4.3.0",
+    "jasmine-core": "~4.6.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.0.0",
+    "typescript": "~5.0.2"
+  }
+}
\ No newline at end of file
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..88889a0
--- /dev/null
+++ b/src/app/app.component.html
@@ -0,0 +1,60 @@
+<div>
+  <div class="header" style="width:100%">
+    <span style="float:left">
+      <button ejs-button class="customBtn" iconCss="e-icons e-menu" (click)="menuBtnClk()">Language</button>
+    </span>
+    <span >Header</span>
+  </div>
+  <ejs-sidebar width="250" position="Left" [isOpen]="toggleSidebar" [enableDock]="true" [dockSize]="72" type="Auto">
+    <div class="sidebar-content">
+      <ejs-listview [dataSource]="listData" [fields]="listFields" (select)="onSelect($event)"></ejs-listview>
+    </div>
+  </ejs-sidebar>
+  <div class="main-content">
+      Before getting into any programming language, one should have basic knowledge about HTML, CSS, and JavaScript. These are the basic building blocks of web designing. HTML describes the structure of a web page whereas CSS describes the presentation of the web page.
+  </div>
+</div>
+
+<style>
+  .header {
+    text-align: center;
+    color: white;
+    background-color: midnightblue;
+    line-height: 51px;
+    font-size: 25px;
+  }
+
+  .main-content {
+      font-size: 18px;
+      /* text-align: center; */
+      padding-top: 50px;
+      padding-left: 30px;
+  }
+
+  .sidebar-content {
+    font-size: 25px;
+    /* text-align: center; */
+    /* padding-top: 50px; */
+  }
+
+  /* .e-sidebar{
+    background-color: #f8f8f8;
+  } */
+
+  .e-sidebar.e-left,  .e-sidebar.e-right {
+      top: 60px;
+  }
+
+  .e-btn .e-btn-icon{
+    font-size: 15px;
+  }
+
+  .customBtn {
+    color: white;
+    font-size: 20px;
+    background-color: midnightblue;
+    border-color: midnightblue;
+    margin-left: 10px; 
+  }
+</style>
+  
\ 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..f7dd36d
--- /dev/null
+++ b/src/app/app.component.spec.ts
@@ -0,0 +1,27 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    declarations: [AppComponent]
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'myangularproject'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('myangularproject');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('myangularproject app is running!');
+  });
+});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
new file mode 100644
index 0000000..fc7e029
--- /dev/null
+++ b/src/app/app.component.ts
@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'myangularproject';
+  public toggleSidebar: boolean=true;
+
+  public listFields = { id:"id", text: "text"}
+
+  public listData: object = [
+    { id: "1", text: "JavaScript", 
+        description: "JavaScript (JS) is an interpreted computer programming language. " +
+        "It was originally implemented as part of web browsers so that client-side scripts" + 
+        "could interact with the user, control the browser, communicate asynchronously, and" +
+        "alter the document content that was displayed. However, it has recently" +
+        "become common in both game development and the creation of desktop applications." },
+    { id: "2", text: "TypeScript", 
+        description: "It is a typed superset of JavaScript that compiles to plain JavaScript." + 
+        "TypeScript is an open-source, object-oriented programing language. It contains all elements of JavaScript" + 
+        "It is a language designed for large-scale JavaScript application development, which can be executed on any" + 
+        "browser, any Host, and any Operating System. TypeScript is a language as well as a set of tools." +
+        " TypeScript is the ES6 version of JavaScript with some additional features." },
+    { id: "3", text: "Angular", 
+        description: "Angular is a platform and framework for building single-page client applications using HTML and TypeScript." +
+        " Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript" +
+        " libraries that you import into your applications." },
+    { id: "4", text: "React",
+        description: "React is a declarative, efficient, and flexible JavaScript library for building user interfaces." +
+        " It lets you compose complex UIs from small and isolated pieces of code called “components”." +
+        " It can also render on the server using Node." },
+    { id: "5", text: "Vue", 
+        description: "A progressive framework for building user interfaces. It is incrementally adoptable." +
+        " The core library is focused on the view layer only and is easy to pick up and integrate with other" +
+        " libraries or existing projects. On the other hand, Vue is also perfectly capable of powering" +
+        " sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries." }
+  ]
+
+  public menuBtnClk(){
+    this.toggleSidebar = !this.toggleSidebar;
+  }
+
+  public onSelect(args:any){
+    let mainContent = document.getElementsByClassName("main-content")[0];
+    if(mainContent){
+      mainContent.innerHTML = args.data.description;
+    }
+  }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
new file mode 100644
index 0000000..5a3aaa3
--- /dev/null
+++ b/src/app/app.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { SidebarModule } from '@syncfusion/ej2-angular-navigations';
+import { ButtonModule, CheckBoxModule, RadioButtonModule, SwitchModule, ChipListModule, FabModule, SpeedDialModule } from '@syncfusion/ej2-angular-buttons';
+import { ListViewModule } from '@syncfusion/ej2-angular-lists';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    SidebarModule,
+    ButtonModule, CheckBoxModule, RadioButtonModule, SwitchModule, ChipListModule, FabModule, SpeedDialModule, ListViewModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/src/favicon.ico b/src/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..997406ad22c29aae95893fb3d666c30258a09537
GIT binary patch
literal 948
zcmV;l155mgP)<h;3K|Lk000e1NJLTq000~S0015c1^@s6KgE8Z00009a7bBm000XT
z000XT0n*)m`~Uz0W=TXrR7i=HS4&J2Q53!N>CBYU7IjCFmI-B}4sMJt3^s9NVg!P0
z6hDQy(L`XWMkB@zOLgN$4KYz;j0zZxq9KKdpZE#5@k0crP^5f9KO};h)ZDQ%ybhht
z%t<DF^WJ^$%)N8(nOiE8$$(XeL8%@9luMqDd3cT+XIb_^YH{kU)iX>9#h|nu0K(bJ
ztIkhEr!*UyrZWQ1k2+YkGqDi8Z<|mIN&$kzpKl{cNP=OQzXHz>vn+c)F)zO|Bou>E
z2|-d_=qY#Y+yOu1a}XI?cU}%04)zz%anD(XZC{#~WreV!a$7k2Ug`?&CUEc0EtrkZ
zL49MB)h!_K{H(*l_93D5tO0;BUnvYlo+;yss%n^&qjt6fZOa+}+FDO(<Bkhw>~2>G
z2dx@=JZ?DHP^;b7*Y1as5^uphBsh*s*z&MBd?e@I>-9kU>63PjP&^#5YTOb&x^6Cf
z?674rmSHB5Fk!{Gv7rv!?qX#ei_L(XtwVqLX3L}$MI|kJ*w(rhx~tc&L&xP#?cQow
zX_|gx$wMr3pRZIIr_;;O|8fAjd;1`nOeu5K(pCu7>^3E&D2OBBq?sY<UH^*#NTt${
zNF)_f745C&UQ!hOL6J5wC>a(%S?GwG&_0-s%_v$L@R!5H_fc)lOb9ZoOO#p`Nn`KU
z3LTTBtjwo`7(<AJG9luHgaE%Npo+H`lp+AIM{k6MKJszc@DM%lod&8TCER*o(XXcC
z8&nVTCXT+)%}_`PXo^}PJ?sF0i+ZEcPp`Gw`||ahk}N7#R#vq!${S`X0z(`KO6v$+
zMMZ<lOR*4Z^w4CXBMvpS<Pee{U^01BA?Uh&H@~OZ--v#JEQN=UdUMG1z|8D<@>HA6
z7gmO$yTR!5L>Bsg!X8616{JUngg_<CkvB3~uoT|Ddv8jJB0!diUI=K4ehj*vX2h(Q
zAz{=+<pcIMznABWNDpCr>@&85%>W=<KFI{w!MTfFH&rswzr*pd&s_k3#Fq-Gj~P%^
zungQTS7mB(`UGii*a&Ca#w!4DJm0!eNS%W4gXg%tYFns>mChTR;x4`P=?PJ~oPuy5
zU-L`C@_!34D21{fD~Y8NVnR3t;aqZI3fIhmgmx}$oc-dKDC6Ap$Gy>a!`A*x2L1v0
WcZ@i?LyX}70000<MNUMnLSTXxWwRmx

literal 0
HcmV?d00001

diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..b48f858
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Myangularproject</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body style="margin:8px 0">
+  <app-root></app-root>
+</body>
+</html>
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..b907513
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,7 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {registerLicense} from '@syncfusion/ej2-base'
+import { AppModule } from './app/app.module';
+registerLicense("ORg4AjUWIQA/Gnt2VFhiQlJPcEBDWXxLflF1VWpTe1Z6dVNWESFaRnZdQV1lSXhSdEBjWXlXdHxX");
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..aa047f0
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,2 @@
+@import '../node_modules/@syncfusion/ej2-material-theme/styles/material.css';
+/* You can add global styles to this file, and also import other style files */
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..374cc9d
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "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..ed966d4
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,33 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "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..be7e9da
--- /dev/null
+++ b/tsconfig.spec.json
@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

From ea8475355cc03949e2ae5e92759497fafc357829 Mon Sep 17 00:00:00 2001
From: vinoth-Kumar-S <31274282+vinoth-Kumar-S@users.noreply.github.com>
Date: Mon, 12 Jun 2023 16:03:33 +0530
Subject: [PATCH 2/2] Add files via upload

---
 README.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 7777617..fca6436 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,12 @@
 # Getting Started with the Angular Sidebar Component
 
-A quick-start project to create a new Angular application using the Angular CLI toolchain and add the Syncfusion Stock Chart component to it. This project contains simple code customization, as well as some important features like enabling tooltips and crosshairs.
+A quick-start project to create a new Angular application using the Angular CLI toolchain and add the Syncfusion Sidebar component to it. This project contains simple code customization, as well as some important features, like toggling, and integration with other components.
 
-Refer to the following documentation on the Syncfusion Angular Stock Chart component: 
-https://ej2.syncfusion.com/angular/documentation/stock-chart/getting-started    
+Refer to the following documentation on the Syncfusion Angular Sidebar component: 
+https://ej2.syncfusion.com/angular/documentation/sidebar/getting-started 
 
-Check out this online example of the Angular Stock Chart component: 
-https://ej2.syncfusion.com/angular/demos/#/bootstrap5/stock-chart/default
+Check out this online example of the Angular Sidebar component: 
+https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/default 
 
 ## Project prerequisites
 
@@ -14,4 +14,4 @@ Make sure that you have the latest versions of NodeJS and Visual Studio Code in
 
 ### How to run this application?
 
-To run this application, you need to clone the `getting-started-with-the-angular-stock-chart-component` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `ng serve` command.
+To run this application, you need to clone the `getting-started-with-the-angular-sidebar-component` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `ng serve` command.