Adding Angular Sidebar sample

README.md

@@ -1 +1,17 @@
-# Getting-started-with-the-Angular-Sidebar-component
+# 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 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 Sidebar component: 
+https://ej2.syncfusion.com/angular/documentation/sidebar/getting-started 
+
+Check out this online example of the Angular Sidebar component: 
+https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/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-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.

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

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

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>
+

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!');
+  });
+});

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;
+    }
+  }
+}

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 { }

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>

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));

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 */

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