Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit fce40af

Browse files
Merge pull request #1 from vinoth-Kumar-S/master
Adding Angular Sidebar sample
2 parents f9cb60c + ea84753 commit fce40af

File tree

15 files changed

+402
-1
lines changed

15 files changed

+402
-1
lines changed

‎README.md‎

Lines changed: 17 additions & 1 deletion
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 Sidebar component to it. This project contains simple code customization, as well as some important features, like toggling, and integration with other components.
4+
5+
Refer to the following documentation on the Syncfusion Angular Sidebar component:
6+
https://ej2.syncfusion.com/angular/documentation/sidebar/getting-started
7+
8+
Check out this online example of the Angular Sidebar component:
9+
https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/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-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‎

Lines changed: 100 additions & 0 deletions
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‎

Lines changed: 42 additions & 0 deletions
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‎

Lines changed: 60 additions & 0 deletions
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‎

Lines changed: 27 additions & 0 deletions
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‎

Lines changed: 52 additions & 0 deletions
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‎

Lines changed: 21 additions & 0 deletions
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‎

Lines changed: 13 additions & 0 deletions
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>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /