Adding Angular Diagram Save and Export video

README.md

@@ -1,2 +1,32 @@
-# how-to-save-and-export-an-Angular-diagram
+# How to Save and Export an Angular Diagram
+
 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.
+
+The serialization documentation for the Syncfusion Angular Diagram component: 
+https://ej2.syncfusion.com/angular/documentation/diagram/serialization 
+
+The print and export documentation for the Syncfusion Angular Diagram component: 
+https://ej2.syncfusion.com/angular/documentation/diagram/export 
+
+Check out the online serialization example for the Angular Diagram component: 
+https://ej2.syncfusion.com/angular/demos/#/material3/diagram/serialization
+
+Check out the online export and print example for the Angular Diagram component: 
+https://ej2.syncfusion.com/angular/demos/#/material3/diagram/print-export
+
+Refer to this video for getting started with the Angular Diagram component:
+https://www.youtube.com/watch?v=TObiS2Lj87U 
+
+Refer to this video for creating and customizing nodes in the Angular Diagram component:
+https://www.youtube.com/watch?v=OnI_SMaYLOk
+
+Refer to this video for adding and customizing connectors in the Angular Diagram component:
+https://www.youtube.com/watch?v=fwK8CWWBwZ4
+
+## 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 `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

@@ -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": "^22.2.9",
+    "@syncfusion/ej2-angular-diagrams": "^22.2.10",
+    "@syncfusion/ej2-angular-inputs": "^22.2.9",
+    "@syncfusion/ej2-material-theme": "*",
+    "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.css

@@ -0,0 +1,7 @@
+.e-btn{
+    margin: 5px;
+}
+
+.e-upload.e-control-wrapper{
+    display: none;
+}

src/app/app.component.html

@@ -0,0 +1,127 @@
+<button ejs-button (click)="onSave()">Save</button>
+<button ejs-button (click)="onLoad()">Load</button>
+<button ejs-button (click)="onExport()">Export</button>
+<button ejs-button (click)="onPrint()">Print</button>
+<ejs-uploader (success)="onUploadSuccess($event)" [asyncSettings]='asyncSettings'></ejs-uploader>
+<ejs-diagram #diagram width="1000" height="580px">
+  <e-nodes>
+    <e-node
+      id="terminator"
+      [offsetX]="300"
+      [offsetY]="100"
+      [height]="50"
+      [width]="150"
+      [style]="basicStyle"
+      [shape]="terminator">
+      <e-node-annotations>
+        <e-node-annotation content="Start"></e-node-annotation> 
+      </e-node-annotations>
+    </e-node>
+    <e-node
+      id="input"
+      [offsetX]="300"
+      [offsetY]="200"
+      [height]="50"
+      [width]="200"
+      [style]="basicStyle"
+      [shape]="data">
+      <e-node-annotations>
+        <e-node-annotation content="Enter a number"></e-node-annotation>
+      </e-node-annotations>
+    </e-node>
+    <e-node
+      id="process"
+      [offsetX]="300"
+      [offsetY]="300"
+      [height]="50"
+      [width]="200"
+      [style]="basicStyle"
+      [shape]="decision">
+      <e-node-annotations>
+        <e-node-annotation content="N divisible by 2"></e-node-annotation>
+      </e-node-annotations>
+    </e-node>
+    <e-node
+      id="processYes"
+      [offsetX]="300"
+      [offsetY]="400"
+      [height]="50"
+      [width]="150"
+      [shape]="process"
+      [style]="basicStyle">
+      <e-node-annotations>
+        <e-node-annotation content="Even Number"></e-node-annotation>
+      </e-node-annotations>
+    </e-node>
+    <e-node
+      id="processNo"
+      [offsetX]="550"
+      [offsetY]="300"
+      [height]="50"
+      [width]="150"
+      [shape]="process"
+      [style]="basicStyle"
+      [ports]="ports">
+      <e-node-annotations>
+        <e-node-annotation content="Odd Number"></e-node-annotation>
+      </e-node-annotations>
+    </e-node>
+    <e-node
+      id="end"
+      [offsetX]="300"
+      [offsetY]="500"
+      [height]="50"
+      [width]="150"
+      [shape]="terminator"
+      [style]="basicStyle"
+      [ports]="ports">
+      <e-node-annotations>
+        <e-node-annotation content="End"></e-node-annotation>
+      </e-node-annotations>
+    </e-node>
+  </e-nodes>
+  <e-connectors>
+    <e-connector
+      id="start"
+      sourceID="terminator"
+      targetID="input"
+    ></e-connector>
+    <e-connector
+      id="inputCon"
+      sourceID="input"
+      targetID="process"
+    ></e-connector>
+    <e-connector id="yes" sourceID="process" targetID="processYes">
+      <e-connector-annotations>
+        <e-connector-annotation
+          content="true"
+          alignment="After"
+          segmentAngle="true"
+        ></e-connector-annotation>
+      </e-connector-annotations>
+    </e-connector>
+    <e-connector id="no" sourceID="process" targetID="processNo">
+      <e-connector-annotations>
+        <e-connector-annotation
+          content="false"
+          alignment="Before"
+          [displacement]="displacement"
+          segmentAngle="true"
+        ></e-connector-annotation>
+      </e-connector-annotations>
+    </e-connector>
+    <e-connector
+      id="processno"
+      sourceID="processYes"
+      targetID="end"
+    ></e-connector>
+    <e-connector
+      id="processend"
+      sourceID="processNo"
+      targetID="end"
+      type="Orthogonal"
+      sourcePortID="port1"
+      targetPortID="port2"
+    ></e-connector>
+  </e-connectors>
+</ejs-diagram>

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