Merge pull request #447 from almothafar/master

Fix demo and docs

angular.json

@@ -71,7 +71,8 @@
           "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": {
-              "base": "docs"
+              "base": "docs",
+              "browser": ""
             },
             "baseHref": "/auto-complete/",
             "index": "projects/demo/src/index.html",

projects/auto-complete/.eslintrc.json

@@ -10,8 +10,8 @@
       ],
       "parserOptions": {
         "project": [
-          "projects/auto-complete/tsconfig.lib.json",
-          "projects/auto-complete/tsconfig.spec.json"
+          "./tsconfig.lib.json",
+          "./tsconfig.spec.json"
         ],
         "createDefaultProgram": true
       },

projects/demo/src/app/app.service.ts

@@ -8,6 +8,8 @@ export class AppService {
   private marvelBase = 'http://gateway.marvel.com:80/v1/public/';
   private marvelPublicKey = 'b9ced31de3874eb2c065a5bce26f8c59';
 
+  private googleMapsPublicKey = 'AIzaSyBjCWwFwEjaClobsRcY7mAlGSfCsRmD0Vg';
+
   constructor(private _http: HttpClient) {
   }
 
@@ -20,4 +22,8 @@ export class AppService {
   public findHeroes = (startsWith: string): Observable<any[]> => {
     return this._http.get<any>(`${this.marvelBase}characters?nameStartsWith=${startsWith}&apikey=${this.marvelPublicKey}`);
   };
+
+  public getMapsUrl = () => {
+    return `https://maps.googleapis.com/maps/api/geocode/json?address=:my_own_keyword&key=${this.googleMapsPublicKey}`
+  }
 }

projects/demo/src/app/component-test/component-test.component.html

@@ -3,15 +3,15 @@
   <legend><h2>Component test - multi autocomplete</h2></legend>
   <div class="wrapper" (click)="showAutocomplete=true">
     <li class="addr" *ngFor="let addr of addrs; let i = index;">
-      <span>{{addr.formatted_address}}</span>
-      <span class="remove" (click)="removeFromAddrs($event, i)">x</span>
+      <span>{{ addr.formatted_address }}</span>
+      <span class="remove" (click)="removeFromAddress($event, i)">x</span>
     </li>
 
     <ngui-auto-complete
       *ngIf="showAutocomplete"
-      (valueSelected)="addToAddrs($event)"
+      (valueSelected)="addToAddress($event)"
       [accept-user-input]="true"
-      [source]="googleGeoCode"
+      [source]="appSvc.getMapsUrl()"
       display-property-name="formatted_address"
       [list-formatter]="myListFormatter"
       loading-text="Google Is Thinking..."

projects/demo/src/app/component-test/component-test.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { AppService } from '../app.service';
 
 @Component({
   selector: 'app-component-test',
@@ -7,7 +8,6 @@ import { Component } from '@angular/core';
 })
 export class ComponentTestComponent {
 
-  public googleGeoCode = 'https://maps.googleapis.com/maps/api/geocode/json?address=:my_own_keyword';
   public showAutocomplete = true;
   public loadingTemplate = '<h1>Loading h1</h1>';
   public addrs: any[] = [
@@ -28,7 +28,7 @@ export class ComponentTestComponent {
         *ngIf="showAutocomplete"
         (valueSelected)="addToAddrs($event)"
         [accept-user-input]="true"
-        [source]="googleGeoCode"
+        [source]="appSvc.getMapsUrl()"
         display-property-name="formatted_address"
         [list-formatter]="myListFormatter"
         loading-text="Google Is Thinking..."
@@ -54,15 +54,15 @@ export class ComponentTestComponent {
     </ngui-auto-complete>
   `;
 
-  constructor() {
+  constructor(public appSvc: AppService) {
   }
 
-  public addToAddrs(addr: any): void {
+  public addToAddress(addr: any): void {
     this.addrs.push(addr);
     this.showAutocomplete = false;
   }
 
-  public removeFromAddrs(evt, index: number): void {
+  public removeFromAddress(event, index: number): void {
     this.addrs.splice(index, 1);
     event.stopPropagation();
   }

projects/demo/src/app/directive-test/directive-test.component.html

@@ -66,7 +66,7 @@ <h1> Autocomplete Directive Test - Local Source </h1>
          id="model4"
          [(ngModel)]="model4"
          placeholder="Enter Address(min. 2 chars)"
-         [source]="googleGeoCode"
+         [source]="appSvc.getMapsUrl()"
          no-match-found-text="No Match Found"
          list-formatter="formatted_address"
          path-to-data="results"
@@ -76,7 +76,7 @@ <h1> Autocomplete Directive Test - Local Source </h1>
          min-chars="2" />
   <br/>selected model4: {{model4 | json}}<br/><br/>
   <pre>{{template5}}</pre>
-  <pre> source: {{googleGeoCode}}</pre>
+  <pre> source: https://maps.googleapis.com/maps/api/geocode/json?address=:my_own_keyword</pre>
 </fieldset>
 
 <fieldset><legend><h2>Source as Observable "Marvel API"</h2></legend>

projects/demo/src/app/directive-test/directive-test.component.ts

@@ -1,5 +1,4 @@
 import { Component, ViewEncapsulation } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
 import { AppService } from '../app.service';
 
 @Component({
@@ -47,8 +46,6 @@ export class DirectiveTestComponent {
       {city: 'Dallas', state: 'Texas', nickname: 'The Big D', population: '1,317,929'},
       {city: 'San Jose', state: 'California', nickname: 'Capital of Silicon Valley', population: '1,025,350'}];
 
-  public googleGeoCode = 'https://maps.googleapis.com/maps/api/geocode/json?address=:my_own_keyword';
-
   public model1 = 'is';
   public model2 = {id: 1, value: 'One'};
   public model3 = {key: 3, name: 'Key Three'};
@@ -194,10 +191,7 @@ export class DirectiveTestComponent {
   `;
 
 
-  constructor(
-    public appSvc: AppService,
-    public http: HttpClient
-  ) {
+  constructor(public appSvc: AppService) {
   }
 
   public customCallback(text) {

projects/demo/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Demo</title>
+  <title>Angular auto-complete Showcase</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">