Skip to content

Commit d242ecb

Browse files
vinoth-Kumar-Svinoth-Kumar-S
authored
Adding Angular Sidebar sample
Adding Angular Sidebar sample
1 parent f9cb60c commit d242ecb

15 files changed

+402
-1
lines changed

‎README.md

+17-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,17 @@
1-
# Getting-started-with-the-Angular-Sidebar-component
1+
# Getting Started with the Angular Sidebar Component
2+
3+
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.
4+
5+
Refer to the following documentation on the Syncfusion Angular Stock Chart component:
6+
https://ej2.syncfusion.com/angular/documentation/stock-chart/getting-started
7+
8+
Check out this online example of the Angular Stock Chart component:
9+
https://ej2.syncfusion.com/angular/demos/#/bootstrap5/stock-chart/default
10+
11+
## Project prerequisites
12+
13+
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
14+
15+
### How to run this application?
16+
17+
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.

‎angular.json

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"myangularproject": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist/myangularproject",
17+
"index": "src/index.html",
18+
"main": "src/main.ts",
19+
"polyfills": [
20+
"zone.js"
21+
],
22+
"tsConfig": "tsconfig.app.json",
23+
"assets": [
24+
"src/favicon.ico",
25+
"src/assets"
26+
],
27+
"styles": [
28+
"src/styles.css",
29+
"./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
30+
],
31+
"scripts": []
32+
},
33+
"configurations": {
34+
"production": {
35+
"budgets": [
36+
{
37+
"type": "initial",
38+
"maximumWarning": "500kb",
39+
"maximumError": "1mb"
40+
},
41+
{
42+
"type": "anyComponentStyle",
43+
"maximumWarning": "2kb",
44+
"maximumError": "4kb"
45+
}
46+
],
47+
"outputHashing": "all"
48+
},
49+
"development": {
50+
"buildOptimizer": false,
51+
"optimization": false,
52+
"vendorChunk": true,
53+
"extractLicenses": false,
54+
"sourceMap": true,
55+
"namedChunks": true
56+
}
57+
},
58+
"defaultConfiguration": "production"
59+
},
60+
"serve": {
61+
"builder": "@angular-devkit/build-angular:dev-server",
62+
"configurations": {
63+
"production": {
64+
"browserTarget": "myangularproject:build:production"
65+
},
66+
"development": {
67+
"browserTarget": "myangularproject:build:development"
68+
}
69+
},
70+
"defaultConfiguration": "development"
71+
},
72+
"extract-i18n": {
73+
"builder": "@angular-devkit/build-angular:extract-i18n",
74+
"options": {
75+
"browserTarget": "myangularproject:build"
76+
}
77+
},
78+
"test": {
79+
"builder": "@angular-devkit/build-angular:karma",
80+
"options": {
81+
"polyfills": [
82+
"zone.js",
83+
"zone.js/testing"
84+
],
85+
"tsConfig": "tsconfig.spec.json",
86+
"assets": [
87+
"src/favicon.ico",
88+
"src/assets"
89+
],
90+
"styles": [
91+
"src/styles.css",
92+
"./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
93+
],
94+
"scripts": []
95+
}
96+
}
97+
}
98+
}
99+
}
100+
}

‎package.json

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "myangularproject",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "ng test"
10+
},
11+
"private": true,
12+
"dependencies": {
13+
"@angular/animations": "^16.0.0",
14+
"@angular/common": "^16.0.0",
15+
"@angular/compiler": "^16.0.0",
16+
"@angular/core": "^16.0.0",
17+
"@angular/forms": "^16.0.0",
18+
"@angular/platform-browser": "^16.0.0",
19+
"@angular/platform-browser-dynamic": "^16.0.0",
20+
"@angular/router": "^16.0.0",
21+
"@syncfusion/ej2-angular-buttons": "^21.2.6",
22+
"@syncfusion/ej2-angular-lists": "^21.2.9",
23+
"@syncfusion/ej2-angular-navigations": "^21.2.9",
24+
"@syncfusion/ej2-material-theme": "~21.2.9",
25+
"rxjs": "~7.8.0",
26+
"tslib": "^2.3.0",
27+
"zone.js": "~0.13.0"
28+
},
29+
"devDependencies": {
30+
"@angular-devkit/build-angular": "^16.0.4",
31+
"@angular/cli": "~16.0.4",
32+
"@angular/compiler-cli": "^16.0.0",
33+
"@types/jasmine": "~4.3.0",
34+
"jasmine-core": "~4.6.0",
35+
"karma": "~6.4.0",
36+
"karma-chrome-launcher": "~3.2.0",
37+
"karma-coverage": "~2.2.0",
38+
"karma-jasmine": "~5.1.0",
39+
"karma-jasmine-html-reporter": "~2.0.0",
40+
"typescript": "~5.0.2"
41+
}
42+
}

‎src/app/app.component.css

Whitespace-only changes.

‎src/app/app.component.html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<div>
2+
<div class="header" style="width:100%">
3+
<span style="float:left">
4+
<button ejs-button class="customBtn" iconCss="e-icons e-menu" (click)="menuBtnClk()">Language</button>
5+
</span>
6+
<span >Header</span>
7+
</div>
8+
<ejs-sidebar width="250" position="Left" [isOpen]="toggleSidebar" [enableDock]="true" [dockSize]="72" type="Auto">
9+
<div class="sidebar-content">
10+
<ejs-listview [dataSource]="listData" [fields]="listFields" (select)="onSelect($event)"></ejs-listview>
11+
</div>
12+
</ejs-sidebar>
13+
<div class="main-content">
14+
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.
15+
</div>
16+
</div>
17+
18+
<style>
19+
.header {
20+
text-align: center;
21+
color: white;
22+
background-color: midnightblue;
23+
line-height: 51px;
24+
font-size: 25px;
25+
}
26+
27+
.main-content {
28+
font-size: 18px;
29+
/* text-align: center; */
30+
padding-top: 50px;
31+
padding-left: 30px;
32+
}
33+
34+
.sidebar-content {
35+
font-size: 25px;
36+
/* text-align: center; */
37+
/* padding-top: 50px; */
38+
}
39+
40+
/* .e-sidebar{
41+
background-color: #f8f8f8;
42+
} */
43+
44+
.e-sidebar.e-left, .e-sidebar.e-right {
45+
top: 60px;
46+
}
47+
48+
.e-btn .e-btn-icon{
49+
font-size: 15px;
50+
}
51+
52+
.customBtn {
53+
color: white;
54+
font-size: 20px;
55+
background-color: midnightblue;
56+
border-color: midnightblue;
57+
margin-left: 10px;
58+
}
59+
</style>
60+

‎src/app/app.component.spec.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { TestBed } from '@angular/core/testing';
2+
import { AppComponent } from './app.component';
3+
4+
describe('AppComponent', () => {
5+
beforeEach(() => TestBed.configureTestingModule({
6+
declarations: [AppComponent]
7+
}));
8+
9+
it('should create the app', () => {
10+
const fixture = TestBed.createComponent(AppComponent);
11+
const app = fixture.componentInstance;
12+
expect(app).toBeTruthy();
13+
});
14+
15+
it(`should have as title 'myangularproject'`, () => {
16+
const fixture = TestBed.createComponent(AppComponent);
17+
const app = fixture.componentInstance;
18+
expect(app.title).toEqual('myangularproject');
19+
});
20+
21+
it('should render title', () => {
22+
const fixture = TestBed.createComponent(AppComponent);
23+
fixture.detectChanges();
24+
const compiled = fixture.nativeElement as HTMLElement;
25+
expect(compiled.querySelector('.content span')?.textContent).toContain('myangularproject app is running!');
26+
});
27+
});

‎src/app/app.component.ts

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-root',
5+
templateUrl: './app.component.html',
6+
styleUrls: ['./app.component.css']
7+
})
8+
export class AppComponent {
9+
title = 'myangularproject';
10+
public toggleSidebar: boolean=true;
11+
12+
public listFields = { id:"id", text: "text"}
13+
14+
public listData: object = [
15+
{ id: "1", text: "JavaScript",
16+
description: "JavaScript (JS) is an interpreted computer programming language. " +
17+
"It was originally implemented as part of web browsers so that client-side scripts" +
18+
"could interact with the user, control the browser, communicate asynchronously, and" +
19+
"alter the document content that was displayed. However, it has recently" +
20+
"become common in both game development and the creation of desktop applications." },
21+
{ id: "2", text: "TypeScript",
22+
description: "It is a typed superset of JavaScript that compiles to plain JavaScript." +
23+
"TypeScript is an open-source, object-oriented programing language. It contains all elements of JavaScript" +
24+
"It is a language designed for large-scale JavaScript application development, which can be executed on any" +
25+
"browser, any Host, and any Operating System. TypeScript is a language as well as a set of tools." +
26+
" TypeScript is the ES6 version of JavaScript with some additional features." },
27+
{ id: "3", text: "Angular",
28+
description: "Angular is a platform and framework for building single-page client applications using HTML and TypeScript." +
29+
" Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript" +
30+
" libraries that you import into your applications." },
31+
{ id: "4", text: "React",
32+
description: "React is a declarative, efficient, and flexible JavaScript library for building user interfaces." +
33+
" It lets you compose complex UIs from small and isolated pieces of code called “components”." +
34+
" It can also render on the server using Node." },
35+
{ id: "5", text: "Vue",
36+
description: "A progressive framework for building user interfaces. It is incrementally adoptable." +
37+
" The core library is focused on the view layer only and is easy to pick up and integrate with other" +
38+
" libraries or existing projects. On the other hand, Vue is also perfectly capable of powering" +
39+
" sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries." }
40+
]
41+
42+
public menuBtnClk(){
43+
this.toggleSidebar = !this.toggleSidebar;
44+
}
45+
46+
public onSelect(args:any){
47+
let mainContent = document.getElementsByClassName("main-content")[0];
48+
if(mainContent){
49+
mainContent.innerHTML = args.data.description;
50+
}
51+
}
52+
}

‎src/app/app.module.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
4+
import { AppComponent } from './app.component';
5+
import { SidebarModule } from '@syncfusion/ej2-angular-navigations';
6+
import { ButtonModule, CheckBoxModule, RadioButtonModule, SwitchModule, ChipListModule, FabModule, SpeedDialModule } from '@syncfusion/ej2-angular-buttons';
7+
import { ListViewModule } from '@syncfusion/ej2-angular-lists';
8+
9+
@NgModule({
10+
declarations: [
11+
AppComponent
12+
],
13+
imports: [
14+
BrowserModule,
15+
SidebarModule,
16+
ButtonModule, CheckBoxModule, RadioButtonModule, SwitchModule, ChipListModule, FabModule, SpeedDialModule, ListViewModule
17+
],
18+
providers: [],
19+
bootstrap: [AppComponent]
20+
})
21+
export class AppModule { }

‎src/favicon.ico

948 Bytes
Binary file not shown.

‎src/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Myangularproject</title>
6+
<base href="/">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="icon" type="image/x-icon" href="favicon.ico">
9+
</head>
10+
<body style="margin:8px 0">
11+
<app-root></app-root>
12+
</body>
13+
</html>

‎src/main.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2+
import {registerLicense} from '@syncfusion/ej2-base'
3+
import { AppModule } from './app/app.module';
4+
registerLicense("ORg4AjUWIQA/Gnt2VFhiQlJPcEBDWXxLflF1VWpTe1Z6dVNWESFaRnZdQV1lSXhSdEBjWXlXdHxX");
5+
6+
platformBrowserDynamic().bootstrapModule(AppModule)
7+
.catch(err => console.error(err));

‎src/styles.css

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import '../node_modules/@syncfusion/ej2-material-theme/styles/material.css';
2+
/* You can add global styles to this file, and also import other style files */

‎tsconfig.app.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/* To learn more about this file see: https://angular.io/config/tsconfig. */
2+
{
3+
"extends": "./tsconfig.json",
4+
"compilerOptions": {
5+
"outDir": "./out-tsc/app",
6+
"types": []
7+
},
8+
"files": [
9+
"src/main.ts"
10+
],
11+
"include": [
12+
"src/**/*.d.ts"
13+
]
14+
}

0 commit comments

Comments
 (0)