Skip to content

Commit 71f8cd4

Browse files
sarathkumarvenkatesansarathkumarvenkatesan
authored
Merge pull request #1 from vinoth-Kumar-S/master
Adding Angular Diagram Save and Export video
2 parents b96bd4b + b141ca8 commit 71f8cd4

16 files changed

+537
-1
lines changed

‎README.md‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,32 @@
1-
# how-to-save-and-export-an-Angular-diagram
1+
# How to Save and Export an Angular Diagram
2+
23
A quick start Angular project that shows how to save and export an Angular Diagram component. This project includes a code snippet to save and load the Diagram as a JSON string and file stream. It also includes a code snippet to export the Diagram in PNG format.
4+
5+
The serialization documentation for the Syncfusion Angular Diagram component:
6+
https://ej2.syncfusion.com/angular/documentation/diagram/serialization
7+
8+
The print and export documentation for the Syncfusion Angular Diagram component:
9+
https://ej2.syncfusion.com/angular/documentation/diagram/export
10+
11+
Check out the online serialization example for the Angular Diagram component:
12+
https://ej2.syncfusion.com/angular/demos/#/material3/diagram/serialization
13+
14+
Check out the online export and print example for the Angular Diagram component:
15+
https://ej2.syncfusion.com/angular/demos/#/material3/diagram/print-export
16+
17+
Refer to this video for getting started with the Angular Diagram component:
18+
https://www.youtube.com/watch?v=TObiS2Lj87U
19+
20+
Refer to this video for creating and customizing nodes in the Angular Diagram component:
21+
https://www.youtube.com/watch?v=OnI_SMaYLOk
22+
23+
Refer to this video for adding and customizing connectors in the Angular Diagram component:
24+
https://www.youtube.com/watch?v=fwK8CWWBwZ4
25+
26+
## Project prerequisites
27+
28+
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
29+
30+
### How to run this application?
31+
32+
To run this application, you need to clone the `how-to-save-and-export-an-Angular-diagram` 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": "^22.2.9",
22+
"@syncfusion/ej2-angular-diagrams": "^22.2.10",
23+
"@syncfusion/ej2-angular-inputs": "^22.2.9",
24+
"@syncfusion/ej2-material-theme": "*",
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‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.e-btn{
2+
margin: 5px;
3+
}
4+
5+
.e-upload.e-control-wrapper{
6+
display: none;
7+
}

‎src/app/app.component.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<button ejs-button (click)="onSave()">Save</button>
2+
<button ejs-button (click)="onLoad()">Load</button>
3+
<button ejs-button (click)="onExport()">Export</button>
4+
<button ejs-button (click)="onPrint()">Print</button>
5+
<ejs-uploader (success)="onUploadSuccess($event)" [asyncSettings]='asyncSettings'></ejs-uploader>
6+
<ejs-diagram #diagram width="1000" height="580px">
7+
<e-nodes>
8+
<e-node
9+
id="terminator"
10+
[offsetX]="300"
11+
[offsetY]="100"
12+
[height]="50"
13+
[width]="150"
14+
[style]="basicStyle"
15+
[shape]="terminator">
16+
<e-node-annotations>
17+
<e-node-annotation content="Start"></e-node-annotation>
18+
</e-node-annotations>
19+
</e-node>
20+
<e-node
21+
id="input"
22+
[offsetX]="300"
23+
[offsetY]="200"
24+
[height]="50"
25+
[width]="200"
26+
[style]="basicStyle"
27+
[shape]="data">
28+
<e-node-annotations>
29+
<e-node-annotation content="Enter a number"></e-node-annotation>
30+
</e-node-annotations>
31+
</e-node>
32+
<e-node
33+
id="process"
34+
[offsetX]="300"
35+
[offsetY]="300"
36+
[height]="50"
37+
[width]="200"
38+
[style]="basicStyle"
39+
[shape]="decision">
40+
<e-node-annotations>
41+
<e-node-annotation content="N divisible by 2"></e-node-annotation>
42+
</e-node-annotations>
43+
</e-node>
44+
<e-node
45+
id="processYes"
46+
[offsetX]="300"
47+
[offsetY]="400"
48+
[height]="50"
49+
[width]="150"
50+
[shape]="process"
51+
[style]="basicStyle">
52+
<e-node-annotations>
53+
<e-node-annotation content="Even Number"></e-node-annotation>
54+
</e-node-annotations>
55+
</e-node>
56+
<e-node
57+
id="processNo"
58+
[offsetX]="550"
59+
[offsetY]="300"
60+
[height]="50"
61+
[width]="150"
62+
[shape]="process"
63+
[style]="basicStyle"
64+
[ports]="ports">
65+
<e-node-annotations>
66+
<e-node-annotation content="Odd Number"></e-node-annotation>
67+
</e-node-annotations>
68+
</e-node>
69+
<e-node
70+
id="end"
71+
[offsetX]="300"
72+
[offsetY]="500"
73+
[height]="50"
74+
[width]="150"
75+
[shape]="terminator"
76+
[style]="basicStyle"
77+
[ports]="ports">
78+
<e-node-annotations>
79+
<e-node-annotation content="End"></e-node-annotation>
80+
</e-node-annotations>
81+
</e-node>
82+
</e-nodes>
83+
<e-connectors>
84+
<e-connector
85+
id="start"
86+
sourceID="terminator"
87+
targetID="input"
88+
></e-connector>
89+
<e-connector
90+
id="inputCon"
91+
sourceID="input"
92+
targetID="process"
93+
></e-connector>
94+
<e-connector id="yes" sourceID="process" targetID="processYes">
95+
<e-connector-annotations>
96+
<e-connector-annotation
97+
content="true"
98+
alignment="After"
99+
segmentAngle="true"
100+
></e-connector-annotation>
101+
</e-connector-annotations>
102+
</e-connector>
103+
<e-connector id="no" sourceID="process" targetID="processNo">
104+
<e-connector-annotations>
105+
<e-connector-annotation
106+
content="false"
107+
alignment="Before"
108+
[displacement]="displacement"
109+
segmentAngle="true"
110+
></e-connector-annotation>
111+
</e-connector-annotations>
112+
</e-connector>
113+
<e-connector
114+
id="processno"
115+
sourceID="processYes"
116+
targetID="end"
117+
></e-connector>
118+
<e-connector
119+
id="processend"
120+
sourceID="processNo"
121+
targetID="end"
122+
type="Orthogonal"
123+
sourcePortID="port1"
124+
targetPortID="port2"
125+
></e-connector>
126+
</e-connectors>
127+
</ejs-diagram>

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

0 commit comments

Comments
 (0)