Merge branch 'main' of https://github.com/BasicPrimitives/angular into main

Author: BasicPrimitives

README.md

@@ -7,6 +7,122 @@ Data visualization diagramming components library for dependencies visualization
 * [NPM](https://www.npmjs.com/package/ngx-basic-primitives) official - release packages.
 * [Basic Primitives for Angular Live Demos](https://basicprimitives.github.io/angular/) - github live site
 
+## Angular example
+Add library from NPM repository:
+
+```Shell
+ng add ngx-basic-primitives
+i Using package manager: npm
+√ Found compatible package version: [email protected].
+√ Package information loaded.
+
+The package [email protected] will be installed and executed.
+Would you like to proceed? Yes
+√ Package successfully installed.
+The package that you are trying to add does not support schematics. You can try using a different version of the package or contact the package author to add ng-add support.
+```
+
+Add `BasicPrimitivesModule` to the application's `src/app/app.module.ts`
+
+```TypeScript
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { BasicPrimitivesModule } from 'ngx-basic-primitives';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    BasicPrimitivesModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+Add `<org-diagram></org-diagram>` component to the application template and define `items` collection to render
+
+```
+import { Component } from '@angular/core';
+import { OrgItemConfig, Enabled, PageFitMode } from 'ngx-basic-primitives';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <div style="text-align:center" class="content">
+      <h1>
+        Welcome to {{title}}!
+      </h1>
+    </div>
+    <div class="sample">
+        <org-diagram 
+            [items]="items"
+            [pageFitMode]=PageFitMode.AutoSize
+            [cursorItem]=0
+            [hasSelectorCheckbox]=Enabled.True
+            [centerOnCursor]=true>
+        </org-diagram>
+    </div>
+    <router-outlet></router-outlet>
+  `,
+  styles: []
+})
+export class AppComponent {
+  title = 'First Organizational Chart';
+
+  PageFitMode = PageFitMode;
+  Enabled = Enabled;
+
+  photos = {
+    a: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA8CAIAAACrV36WAAAAAXNSR0IArs4c6QAAAARn' + 
+    'QU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGnSURBVGhD7dnBbQJBDAVQk1o2QjlQwKYGzpSwKQfq4IxIC' + 
+    'RTB9jLZHCJFwWv7/7EiDt6zmX2yPYMHNq01eb7n5flI36JiIXWpbFW2kAwgsdVblS0kA0hs9db/ZWs+vW/Wno9PxPE3dh' + 
+    'ls6Od+HI1XT1d64Sb8R5utEulwdbA8VY+LZ/kqkfF456pBHxDz5Xxze/p2vsxukBbAshTVOE0PO4B2cUlWKrgUTKsrV0e' + 
+    'ut3RVU/cm5aKKqPXVbjuIDPtDUh2JImq1+jmjkupIFNFStXadHncWXkecpb3393me4oJZnionXyjLV6W4QFZEleHCWNG+' + 
+    '0eKggQJiRVV6vhAXwoqrul0AC1H1uuIsTLUyukYH1jBL7WJ8lgq6oqwkVXSQDrLSVEFXjJWoirlCrFRVyBVhJasirgCr6' + 
+    '5tEv7a5A5jL0tcN7vNl9OVcHqtXRbocVr+Kc9k3H/3qPL69Ise7dh0SsS+2JmtFddgvdy/gGbY7Jdp2GRcyrlu1BfUjxt' + 
+    'iPRm/lqVbGHOMHnU39zQm0I/UbBLA+GVosJHGVrcoWkgEktnoLydYXkF/LiXG21MwAAAAASUVORK5CYII='
+  };
+
+  items = [
+    new OrgItemConfig({
+      id: 0,
+      parent: null,
+      title: 'James Smith',
+      description: 'VP, Public Sector',
+      image: this.photos.a
+    }),
+    new OrgItemConfig({
+      id: 1,
+      parent: 0,
+      title: 'Ted Lucas',
+      description: 'VP, Human Resources',
+      image: this.photos.a
+    }),
+    new OrgItemConfig({
+      id: 2,
+      parent: 0,
+      title: 'Fritz Stuger',
+      description: 'Business Solutions, US',
+      image: this.photos.a
+    })
+  ];
+}
+```
+
+Start application
+
+```Shell
+ng serve
+```
+
 ## Products
 ### Basic Primitives Diagrams for JavaScript
 * 100% client-side JavaScript layout and rendering.
@@ -83,6 +199,6 @@ Do you want to use a Basic Primitives diagram for a personal website, a school s
 ## Performance
 Through a full API, you can add, remove and modify individual items and their properties. The component will only update the visual elements affected by the API changes. We put in much effort to make it happen!
 
-Copyright (c) 2013 - 2022 Basic Primitives Inc
+Copyright (c) 2013 - 2023 Basic Primitives Inc
 * [Non-commercial - Free](http://creativecommons.org/licenses/by-nc/3.0/)
 * [Commercial and government licenses](license.pdf)

angular.json

@@ -134,6 +134,5 @@
         }
       }
     }
-  },
-  "defaultProject": "ngx-basic-primitives"
+  }
 }