Update demo

Author: leovo2708

src/demo/app.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
 import { TreeviewModule } from '../lib';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -17,6 +18,7 @@ import { DisabledOnSelectorDirective } from './disabled-on-selector.directive';
     imports: [
         BrowserModule,
         FormsModule,
+        HttpClientModule,
         TreeviewModule.forRoot(),
         DropdownTreeviewSelectModule,
         AppRoutingModule

src/demo/city/cities.json

@@ -0,0 +1,10 @@
+[{
+  "name": "Ho Chi Minh",
+  "postCode": 700000
+}, {
+  "name": "Ha Noi",
+  "postCode": 100000
+}, {
+  "name": "Da Nang",
+  "postCode": 550000
+}]

src/demo/city/city.component.html

@@ -6,7 +6,7 @@ <h3>Pipe & i18n (
   <li>How to get unchecked items</li>
   <li>i18n</li>
 </ul>
-<div class="row">
+<div class="row" *ngIf="cities">
   <div class="col-12">
     <div class="alert alert-success" role="alert">
       Selected cities: {{selectedCities | json}}

src/demo/city/city.component.ts

@@ -22,7 +22,9 @@ export class CityComponent implements OnInit {
     ) { }
 
     ngOnInit() {
-        this.cities = this.service.getCities();
+        this.service.getCities().subscribe(cities => {
+            this.cities = cities;
+        });
     }
 
     onSelectedChange(selectedCities: City[]) {

src/demo/city/city.service.ts

@@ -1,4 +1,6 @@
 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
 
 export interface City {
     id: number;
@@ -8,23 +10,12 @@ export interface City {
 
 @Injectable()
 export class CityService {
-    getCities(): City[] {
-        return [
-            {
-                id: 1,
-                name: 'Ho Chi Minh',
-                postCode: 700000
-            },
-            {
-                id: 2,
-                name: 'Ha Noi',
-                postCode: 100000
-            },
-            {
-                id: 3,
-                name: 'Da Nang',
-                postCode: 550000
-            }
-        ];
+    constructor(
+        private httpClient: HttpClient
+    ) { }
+
+    getCities(): Observable<City[]> {
+        const url = 'https://raw.githubusercontent.com/leovo2708/ngx-treeview/master/src/demo/city/cities.json';
+        return this.httpClient.get<City[]>(url);
     }
 }

src/demo/product/product.component.html

@@ -15,7 +15,7 @@
   </div>
 </ng-template>
 <h3>Advanced (
-  <a href="https://github.com/leovo2708/ngx-treeview/tree/master/src/demo/city" target="_blank">source code</a>)</h3>
+  <a href="https://github.com/leovo2708/ngx-treeview/tree/master/src/demo/product" target="_blank">source code</a>)</h3>
 <ul>
   <li>Using custom TreeviewConfig to set new default configuration</li>
   <li>Using OrderDownlineTreeviewEventParser to get selection by order</li>