From 52ebacc6bea43fadde8a60a0a2be47d0d6af3be8 Mon Sep 17 00:00:00 2001
From: Lahiru Jayamanna <lsampath999@gmail.com>
Date: Fri, 28 Dec 2018 13:26:46 +0530
Subject: [PATCH] Update data table data binding examples

---
 ...able-real-time-data-binding.component.html |  3 +++
 ...le-server-side-data-binding.component.html | 19 ++++++++++++++++---
 ...able-server-side-data-binding.component.ts |  3 ++-
 ...ata-table-server-side-data-binding.list.ts |  3 +++
 .../components/docs/items.md                  |  4 ++++
 .../main/components/main/main.component.ts    | 16 +++++++++++++++-
 6 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 src/app/feature/data-table/data-table-server-side-data-binding/components/docs/items.md

diff --git a/src/app/feature/data-table/data-table-real-time-data-binding/components/data-table-real-time-data-binding.component.html b/src/app/feature/data-table/data-table-real-time-data-binding/components/data-table-real-time-data-binding.component.html
index 782ff696..2b97d3f4 100644
--- a/src/app/feature/data-table/data-table-real-time-data-binding/components/data-table-real-time-data-binding.component.html
+++ b/src/app/feature/data-table/data-table-real-time-data-binding/components/data-table-real-time-data-binding.component.html
@@ -16,6 +16,9 @@ <h2 id="basicUsage">Basic Usage</h2>
 
   <pre class="prettyprint lang-html">{{demoSnippet.realTimeSideDataBinding}}</pre>
 
+  <p>Please refer <b>data-table-real-time-data-binding.component.ts</b> file to see the example of realtime data
+    binding via data source.</p>
+
   <h2 id="suggestedLinks">Suggested Links</h2>
   <a rel="noopener" target="_blank" href="api-docs/components/DataTableComponent.html#dataSource">API Doc for Real-time
     Data Binding</a>
diff --git a/src/app/feature/data-table/data-table-server-side-data-binding/components/data-table-server-side-data-binding.component.html b/src/app/feature/data-table/data-table-server-side-data-binding/components/data-table-server-side-data-binding.component.html
index 2b4716e7..5c6a9c4d 100644
--- a/src/app/feature/data-table/data-table-server-side-data-binding/components/data-table-server-side-data-binding.component.html
+++ b/src/app/feature/data-table/data-table-server-side-data-binding/components/data-table-server-side-data-binding.component.html
@@ -1,12 +1,25 @@
 <div class="feature-container">
   <h2>Server Side Data Biding</h2>
-  <p>In server side data binding, data should be passed via the <b>dataSource</b> attribute => [dataSource]="source"</p>
+  <p>Sometimes, you might want to bind a direct data source coming from the different server to the data table without
+    binding it as a static data source.</p>
 
-  <app-server-side-data-binding></app-server-side-data-binding>
+  <p>in such cases, now you can easily use ornamentum server side data binding facility.</p>
+
+  <h2 id="whatYouWillSee">What You Will See</h2>
 
+  <app-server-side-data-binding></app-server-side-data-binding>
   <app-example-code [files]="serverSideDataBindingUsage"></app-example-code>
 
-  <h2>Suggested Links</h2>
+  <h2 id="basicUsage">Basic Usage</h2>
+  <p>To support server side data binding, simply set available observable data source to <code>dataSource</code>
+    attribute.</p>
+
+  <pre class="prettyprint lang-html">{{demoSnippet.serverSideDataBinding}}</pre>
+
+  <p>Please refer <b>data-table-server-side-data-binding.component.ts</b> file to see the example of server side data
+    binding via data source.</p>
+
+  <h2 id="suggestedLinks">Suggested Links</h2>
   <a rel="noopener" target="_blank" href="api-docs/components/DataTableComponent.html#dataSource">API Doc for Server
     Side Data Binding</a>
 </div>
diff --git a/src/app/feature/data-table/data-table-server-side-data-binding/components/data-table-server-side-data-binding.component.ts b/src/app/feature/data-table/data-table-server-side-data-binding/components/data-table-server-side-data-binding.component.ts
index c8faf09f..bdf8181a 100644
--- a/src/app/feature/data-table/data-table-server-side-data-binding/components/data-table-server-side-data-binding.component.ts
+++ b/src/app/feature/data-table/data-table-server-side-data-binding/components/data-table-server-side-data-binding.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { serverSideDataBindingUsage } from './data-table-server-side-data-binding.list';
+import { demoSnippet, serverSideDataBindingUsage } from './data-table-server-side-data-binding.list';
 
 @Component({
   selector: 'app-data-table-server-side-data-binding-component',
@@ -9,4 +9,5 @@ import { serverSideDataBindingUsage } from './data-table-server-side-data-bindin
 })
 export class DataTableServerSideDataBindingComponent {
   public serverSideDataBindingUsage = serverSideDataBindingUsage;
+  public demoSnippet = demoSnippet;
 }
diff --git a/src/app/feature/data-table/data-table-server-side-data-binding/components/data-table-server-side-data-binding.list.ts b/src/app/feature/data-table/data-table-server-side-data-binding/components/data-table-server-side-data-binding.list.ts
index 31f012b5..b92ad440 100644
--- a/src/app/feature/data-table/data-table-server-side-data-binding/components/data-table-server-side-data-binding.list.ts
+++ b/src/app/feature/data-table/data-table-server-side-data-binding/components/data-table-server-side-data-binding.list.ts
@@ -23,3 +23,6 @@ export const serverSideDataBindingUsage: ExampleFile[] = [
   }
 ];
 
+export const demoSnippet: any = {
+  serverSideDataBinding: require('!!raw-loader?lang=typescript!./docs/items.md')
+};
diff --git a/src/app/feature/data-table/data-table-server-side-data-binding/components/docs/items.md b/src/app/feature/data-table/data-table-server-side-data-binding/components/docs/items.md
new file mode 100644
index 00000000..b31d5e55
--- /dev/null
+++ b/src/app/feature/data-table/data-table-server-side-data-binding/components/docs/items.md
@@ -0,0 +1,4 @@
+<ng-data-table
+  ...
+  [dataSource]="<-- observable data source -->"
+</ng-data-table>
diff --git a/src/app/main/components/main/main.component.ts b/src/app/main/components/main/main.component.ts
index cfba92db..c260dd3f 100644
--- a/src/app/main/components/main/main.component.ts
+++ b/src/app/main/components/main/main.component.ts
@@ -67,7 +67,21 @@ export class MainComponent {
         },
         {
           routePath: '/feature/data-table/server-side-data-binding',
-          title: 'Server-side Data Binding'
+          title: 'Server-side Data Binding',
+          navigation: [
+            {
+              title: 'What You Will See',
+              anchor: 'whatYouWillSee'
+            },
+            {
+              title: 'Basic Usage',
+              anchor: 'basicUsage'
+            },
+            {
+              title: 'Suggested Links',
+              anchor: 'suggestedLinks'
+            }
+          ]
         },
         {
           routePath: '/feature/data-table/real-time-data-binding',