From 0bbd8842e275e3aefc49f805e3b60c36a80f00e9 Mon Sep 17 00:00:00 2001
From: Tzahi Levi <thetzahilevi@gmail.com>
Date: Thu, 20 Jun 2019 13:06:42 +0300
Subject: [PATCH] add version and explain howto custom menu-item

---
 README.md                  | 26 ++++++++++++++++++++++++++
 src/app/app.component.html |  2 +-
 src/app/app.component.ts   |  3 +++
 src/typings.d.ts           | 13 +++++++++++++
 tsconfig.json              |  5 ++++-
 5 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 src/typings.d.ts

diff --git a/README.md b/README.md
index c4c7839..ac5cb0a 100644
--- a/README.md
+++ b/README.md
@@ -87,6 +87,8 @@ export class AppComponent {
 }
 ```
 
+Learn more about [AnsynApi](https://github.com/AnSyn/ansyn/wiki/Ansyn-Package).
+
 on `app.component.css`:
 
 The element `ansyn-app` has to receive height. It can be explicit height, or implicit like "display:flex" + "flex:1"
@@ -100,3 +102,27 @@ ansyn-app {
 }
 ```
 
+on `main.ts`:
+
+You can provide an object that override the default configuration of your Ansyn app.(let's say we called it overrideConfig) , 
+then you need to pass it to the `fetchConfigProviders` function from `@ansyn/ansyn` with the path of the original configuration('assets/config/app.config.json') which return you a promise with provider then pass it to `platformBrowserDynamic` function.
+```typescript
+fetchConfigProviders('assets/config/app.config.json', overrideConfig)
+  .then(providers => platformBrowserDynamic(providers).bootstrapModule(AppModule).catch(err => console.log(err)));
+``` 
+Learn more about `Ansyn` [configuration](https://github.com/AnSyn/ansyn/wiki/Ansyn-configuration).
+
+### Add custome menu item
+
+You could add your own custom menu item, in a few simple step.
+
+1. Create a new component for your menu item.
+2. In `main.ts` before you call `fetchConfigProviders` tell `ansynConfig.ansynMenuItems`about your custom menu item by pushing him an object look like:
+  ```typescript
+  {
+  name: 'THE_MENU_ITEM_NAME',
+  component: YOUR_COMPONENT,
+  iconClass: 'YOUR_MENU_ITEM_ICON_CLASS'
+  }
+  ```
+  next add your menu item name to `menuConfig.menuItems`
diff --git a/src/app/app.component.html b/src/app/app.component.html
index adc778c..d31763a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -14,4 +14,4 @@ <h1> Angular 2 implementation </h1>
 
 </div>
 
-<ansyn-app></ansyn-app>
+<ansyn-app [version]="version"></ansyn-app>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index f59cac7..af827a6 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -7,6 +7,8 @@ import { Observable } from 'rxjs';
 import { take, tap } from 'rxjs/operators';
 import { layoutOptions } from '@ansyn/map-facade';
 import { LayoutKey } from '@ansyn/map-facade';
+import * as packageJson from 'root/package.json';
+
 
 const moment = momentNs;
 
@@ -29,6 +31,7 @@ export class AppComponent {
     this.overlay('333', 'https://image.shutterstock.com/z/stock-vector-cool-milkshake-190524542.jpg',
       1600, 1500, this.calcDate(3))
   ];
+  version: string = (<any>packageJson).dependencies['@ansyn/ansyn'].replace(/[/^/~]/g , '');
 
   calcDate(days: number) {
     return moment().subtract(days, 'day').toDate();
diff --git a/src/typings.d.ts b/src/typings.d.ts
new file mode 100644
index 0000000..11aa2d2
--- /dev/null
+++ b/src/typings.d.ts
@@ -0,0 +1,13 @@
+declare module '*.json' {
+	const value: any;
+	export default value;
+}
+
+declare module '*package.json' {
+	const value: {
+    dependencies: {
+      [deps: string]: string
+    };
+	};
+	export default value;
+}
diff --git a/tsconfig.json b/tsconfig.json
index ef44e28..471049a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,6 +15,9 @@
     "lib": [
       "es2017",
       "dom"
-    ]
+    ],
+    "paths": {
+      "root/package.json": ["./package.json"]
+    }
   }
 }