Update data table data binding examples

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>

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>

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;
 }

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

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>

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',