First Commit

Author: Yasir.Shabbir

package-lock.json

@@ -33,7 +33,7 @@
     "zone.js": "^0.8.14"
   },
   "devDependencies": {
-    "@angular/cli": "1.4.5",
+    "@angular/cli": "1.5.0",
     "@angular/compiler-cli": "^4.2.4",
     "@angular/language-service": "^4.2.4",
     "@types/jasmine": "~2.5.53",

package.json

@@ -1,5 +1,5 @@
 <div style="padding: 25px">
   <data-table-demo-1></data-table-demo-1>
-  <data-table-demo-2></data-table-demo-2>
-  <data-table-demo-3></data-table-demo-3>
+
+
 </div>

src/app/app.component.html

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +7,8 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'app';
+
+  ngOnInit(): void {
+  }
+
 }

src/app/app.component.ts

@@ -1,30 +1,30 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
 
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
 
-import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
+import {DataTableModule} from 'angular-4-data-table-bootstrap-4';
+
+import {DataTableDemo1} from './data-table/data-table-demo1';
+import {HttpClientModule} from "@angular/common/http";
 
-import { DataTableDemo1 } from './demo1/data-table-demo1';
-import { DataTableDemo2 } from './demo2/data-table-demo2';
-import { DataTableDemo3 } from './demo3/data-table-demo3';
 
 @NgModule({
   declarations: [
     AppComponent,
-    DataTableDemo1,
-    DataTableDemo2,
-    DataTableDemo3
+    DataTableDemo1
   ],
   imports: [
     BrowserModule,
     CommonModule,
     FormsModule,
-    DataTableModule
+    DataTableModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

src/app/app.module.ts

@@ -0,0 +1 @@
+export default []

src/app/data-table/data-table-demo1-data.js

@@ -0,0 +1,51 @@
+<div style="margin: auto; max-width: 1000px; margin-bottom: 50px;">
+
+  <div>
+    <span>Name: </span>
+    <input type="text" (keyup)="onNameSearch($event)" class="form-control input-sm" style="display: inline-block; width: 100px">
+
+    <span>Country: </span>
+    <input type="text"  (keyup)="onCountrySearch($event)" class="form-control input-sm" style="display: inline-block; width: 100px">
+
+    <span>City: </span>
+    <input type="text"  (keyup)="onCitySearch($event)"  class="form-control input-sm" style="display: inline-block; width: 100px">
+
+
+
+    <input type="button" class="btn btn-outline-primary" (click)="getData()" value="CLick to Get Result">
+
+  </div>
+    <data-table id="persons-grid"
+        headerTitle="Facebook Graph API Result"
+        [items]="items"
+        [itemCount]="itemCount"
+        (reload)="reloadItems($event)"
+        (rowClick)="rowClick($event)"
+        (rowDoubleClick)="rowDoubleClick($event)"
+        [rowTooltip]="rowTooltip"
+
+        >
+        <data-table-column
+            [property]="'name'"
+            [header]="'Name'"
+            [sortable]="true"
+            [resizable]="true"
+        >
+        </data-table-column>
+        <data-table-column
+            [property]="'country'"
+            [header]="'Country'"
+            [sortable]="true">
+        </data-table-column>
+        <data-table-column
+            property="city"
+            header="City"
+            width="150px">
+        </data-table-column>
+
+
+    </data-table>
+
+
+
+</div>