V0.0.3

CHANGELOG.md

@@ -8,12 +8,20 @@ All notable changes to this project will be documented in this file. See [standa
 
 
 <a name="0.0.3"></a>
-## [0.0.3](https://github.com/psykolm22/angular-google-place/compare/v0.0.2...v0.0.3) (2018-01-01)
+## [0.0.3](https://github.com/psykolm22/angular-google-place/compare/v0.0.2...v0.0.3) (2018-01-04)
+- Material Dialog Example ✍️
+
+- Dynamically use options part like country or type
 
+- Google Api have change parameter 'types' is deprecated since 16/02/17.
+'types' is now a string 'type'. 
+type list updated
 
+- list of returns types add to constant
+- Example update
 
 <a name="0.0.2"></a>
-## 0.0.2 (2017-12-31)
+## 0.0.2 (https://github.com/psykolm22/angular-google-place/compare/v0.0.1...v0.0.2)(2017-12-31)
 -Migration of ng2-google-place-autocomplete 💯
 
 -ng-packagr

README.md

@@ -3,11 +3,19 @@ This is a Angular-Google-Place Module publish with Angular Format Package ( ng-p
 
 [![NPM](https://nodei.co/npm/angular-google-place.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/angular-google-place/)
 
-[![devDependency Status](https://gemnasium.com/badges/github.com/psykolm22/angular-google-place.svg)](https://gemnasium.com/github.com/psykolm22/ng2-google-place-autocomplete) [![npm](http://img.shields.io/npm/v/angular-google-place.svg?style=flat)](https://www.npmjs.org/package/angular-google-place) [![license](https://img.shields.io/github/license/psykolm22/angular-google-place.svg)]()
+[![devDependency Status](https://gemnasium.com/badges/github.com/psykolm22/angular-google-place.svg)](https://gemnasium.com/github.com/psykolm22/ng2-google-place-autocomplete) [![npm](http://img.shields.io/npm/v/angular-google-place.svg?style=flat)](https://www.npmjs.org/package/angular-google-place) 
 [![npm Downloads](https://img.shields.io/npm/dw/angular-google-place.svg?style=flat-square)](https://www.npmjs.com/package/ng-packagr)
 [![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square)](https://renovateapp.com/)
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/bc6faa59e1904c2c95217666541ff3b3)](https://www.codacy.com/app/pierrenedelec/angular-google-place?utm_source=github.com&utm_medium=referral&utm_content=psykolm22/angular-google-place&utm_campaign=Badge_Grade)
+
+[![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)
+[![TypeScript](https://badges.frapsoft.com/typescript/love/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)
+[![license](https://img.shields.io/github/license/psykolm22/angular-google-place.svg)]()
+[![forthebadge](http://forthebadge.com/images/badges/built-by-developers.svg)](http://forthebadge.com)
+
+
+[Docs](https://psykolm22.github.io/angular-google-place/docs/) | [Demo](https://psykolm22.github.io/angular-google-place/) 
 
-[Docs](https://psykolm22.github.io/angular-google-place) | [Demo](https://psykolm22.github.io/angular-google-place/) 
 
 #Release Notes
 Please take care of [Release Note](https://github.com/psykolm22/angular-google-place/releases) before creating issues.  
@@ -40,6 +48,7 @@ Replace by our Google api key .
 <input type="text" [(ngModel)] = "address" 
  [options]='options' 
  (setAddress) = "getAddress($event)"
+ (FormatAddress)="getFormattedAddress($event)"
  (street_number) = 'street_number=$event'
  (street)= 'street=$event'
  (city)= 'city=$event'
@@ -57,20 +66,23 @@ Replace by our Google api key .
  (utc_offset)='utc_offset=$event' 
  (vicinity)='vicinity=$event' 
  (photos)='photos=$event' 
- (airport)='airport=$event' 
  (CountryCodes)='CountryCodes=$event'
   id="autocomplete"
  angularGooglePlace/> 
 ```
 * Add in your ***.component.ts:
+* check CHANGELOG.md  , types have change to type.
 ```typeScript
 import { Address } from 'angular-google-place';
 
  export class AppComponent {
-  public options = {types: ['address'], componentRestrictions: { country: 'FR' }};
+  public options = {type : 'address', componentRestrictions: { country: 'FR' }};
   getAddress(place: Address) {
          console.log('Address', place);
      }
+  getFormattedAddress(event: any) {
+         console.log(event);
+     }   
 }
 ```
 
@@ -88,12 +100,21 @@ import {AngularGooglePlaceModule} from 'angular-google-place';
 Options for Google Search
 * Choose one type from
 ```
-  [ '(cities)', '(regions)', 'country', 'postal_code', 'sublocality', 'establishment', 'address', 'geocode'] 
+  [ '(cities)',
+        '(regions)',
+        'country',
+        'postal_code',
+        'locality',
+        'sublocality',
+        'address',
+        'geocode',
+        'administrative_area_level_1',
+        'administrative_area_level_2',] 
 ```  
 * country ( dynamic change allow) : CountryCode ISO 3166-1 Alpha-2 ( see demo )
 ```html  
 [options]="{
-    types: [],
+    type: 'address',
     componentRestrictions: { country: 'FR' }
     }"
 ```

doc/package.json

@@ -6,7 +6,7 @@
     "scripts": {
         "ng": "ng",
         "start": "ng serve",
-        "build": "ng build --prod --aot=false --build-optimizer=false",
+        "build": "ng build --prod --aot=false --build-optimizer=false -bh angular-google-place",
         "test": "ng test",
         "lint": "ng lint",
         "e2e": "ng e2e"

doc/src/app/app.component.css

@@ -15,13 +15,6 @@ body {
     width: 480px;
 }
 
-#autocomplete {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 99%;
-}
-
 .label {
     text-align: right;
     font-weight: bold;
@@ -52,11 +45,6 @@ body {
     width: 200px;
 }
 
-#locationField {
-    height: 20px;
-    margin-bottom: 2px;
-}
-
 div.img {
     margin: 5px;
     border: 1px solid #ccc;
@@ -76,4 +64,23 @@ div.img img {
 div.desc {
     padding: 15px;
     text-align: center;
+}
+
+.example-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+}
+
+.example-full-width {
+    width: 100%;
+}
+
+.example-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.example-container>* {
+    width: 100%;
 }

doc/src/app/app.component.html

@@ -1,18 +1,24 @@
-<div id="locationField">
-    <input type="text" size="100" [(ngModel)]="address" [options]='options' (setAddress)="getAddress($event)" (street_number)='street_number=$event' (street)='street=$event' (city)='city=$event' (state)='state=$event' (district)='district=$event' (country)='country=$event'
-        (postal_code)='postal_code=$event' (lat)='lat=$event' (lng)='lng=$event' (adr_address)='adr_address=$event' (name)='name=$event' (place_id)='place_id=$event' (types)='types=$event' (url)='url=$event' (utc_offset)='utc_offset=$event' (vicinity)='vicinity=$event'
-        (photos)='photos=$event' (airport)='airport=$event' (CountryCodes)='CountryCodes=$event' id="autocomplete" angularGooglePlace/>
-
-
+<div class="example-container">
+    <mat-form-field class="example-full-width">
+        <input matInput type="text" size="100" [(ngModel)]="address" [options]='options' (setAddress)="getAddress($event)" (street_number)='street_number=$event' (street)='street=$event' (city)='city=$event' (state)='state=$event' (district)='district=$event'
+            (country)='country=$event' (postal_code)='postal_code=$event' (lat)='lat=$event' (lng)='lng=$event' (adr_address)='adr_address=$event' (name)='name=$event' (place_id)='place_id=$event' (types)='types=$event' (url)='url=$event' (utc_offset)='utc_offset=$event'
+            (vicinity)='vicinity=$event' (FormatAddress)='FormatAddress($event)' (photos)='photos=$event' (airport)='airport=$event' placeholder="Search..." (CountryCodes)='CountryCodes=$event' (TypesOptions)='TypesOptions=$event' id="autocomplete" angularGooglePlace/>
 
+    </mat-form-field>
+    <mat-form-field class="example-full-width">
+        <mat-select class="form-control" [(ngModel)]="options.type" placeholder="Types">
+            <mat-option *ngFor="let type of typesOptions" [value]="[type]">{{ type }}</mat-option>
+        </mat-select>
+    </mat-form-field>
+    <mat-form-field class="example-full-width">
+        <mat-select class="form-control" [(ngModel)]="options.componentRestrictions.country" placeholder="Country">
+            <mat-option *ngFor="let country of CountryCodes" [value]="country.Code">{{ country.Name }}</mat-option>
+        </mat-select>
+    </mat-form-field>
+</div>
 
 
 
-</div>
-<select class="form-control" [(ngModel)]="options.componentRestrictions.country">
-<option *ngFor="let country of CountryCodes" [value]="country.Code">{{ country.Name }}</option>
-</select>
-
 <table id="address">
     <tr>
         <td class="label">Street address</td>
@@ -93,4 +99,8 @@
         </div>
     </div>
 </div>
-<button mat-button (click)="openDialog()">Example in Dialog</button>
+<button mat-button (click)="openDialog()">Example in Dialog</button>
+
+<input type="text" size="100" (postal_code)='savePostalCode($event)' [(ngModel)]="address2" [options]='options' (setAddress)="getAddress($event)" (CountryCodes)='CountryCodes=$event' (TypesOptions)='TypesOptions=$event' id="autocomplete2" angularGooglePlace/>
+
+<h5> postalCode = {{postalCode}} </h5>

doc/src/app/app.component.ts

@@ -1,30 +1,37 @@
 import { DialogDataExampleDialog } from './dialogdata.component';
-import { Address } from 'angular-google-place';
+import { Address, AngularGooglePlaceService, AngularGooglePlaceConstantService } from 'angular-google-place';
 import { Component, Inject, AfterContentInit, AfterViewInit, QueryList, ContentChildren, ViewChildren } from '@angular/core';
-import {MatDialog, MAT_DIALOG_DATA} from '@angular/material';
+import {MatDialog} from '@angular/material';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  public options = {types: ['address'], componentRestrictions: { country: 'FR' }};
-
-  constructor(public dialog: MatDialog) {}
+  typesOptions: string[];
+  postalCode: string;
+  public options = {type: 'address', componentRestrictions: { country: 'FR' }};
+
+  constructor(public dialog: MatDialog, public service: AngularGooglePlaceService, public constant: AngularGooglePlaceConstantService) {
+    console.log(service);
+    this.typesOptions = this.constant.types_options();
+  }
   getAddress(place: Address) {
          console.log('Address', place);
      }
 
 
+savePostalCode(event: any) {
+  this.postalCode = event;
+  console.log(event);
+}
 
-
+FormatAddress(event: any) {
+  console.log(event);
+}
 
         openDialog() {
-          this.dialog.open(DialogDataExampleDialog, {
-            data: {
-              animal: 'panda'
-            }
-          });
+          this.dialog.open(DialogDataExampleDialog);
         }
       }
 

doc/src/app/app.module.ts

@@ -2,11 +2,12 @@ import { DialogDataExampleDialog } from './dialogdata.component';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
+import {MatTableModule} from '@angular/material/table';
 import { AngularGooglePlaceModule} from 'angular-google-place';
-
+import {MatInputModule} from '@angular/material/input';
 import { AppComponent } from './app.component';
 import {MatDialogModule} from '@angular/material/dialog';
+import {MatSelectModule} from '@angular/material/select';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 @NgModule({
   declarations: [
@@ -17,7 +18,10 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
     BrowserModule,
     FormsModule,
     BrowserAnimationsModule,
+    MatInputModule,
+    MatSelectModule,
     MatDialogModule,
+    MatTableModule,
     AngularGooglePlaceModule
   ],
   providers: [],

doc/src/app/dialog-data-example-dialog.html

@@ -4,10 +4,6 @@
         (photos)='photos=$event' (airport)='airport=$event' (CountryCodes)='CountryCodes=$event' id="autocomplete" angularGooglePlace/>
 
 
-
-
-
-
 </div>
 <select class="form-control" [(ngModel)]="options.componentRestrictions.country">
 <option *ngFor="let country of CountryCodes" [value]="country.Code">{{ country.Name }}</option>

doc/yarn.lock

@@ -266,10 +266,6 @@ amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
-"angular-google-place@file:../package/angular-google-place-0.0.2.tgz":
-  version "0.0.2"
-  resolved "file:../package/angular-google-place-0.0.2.tgz#bdc9e1aa2893da4da1725b444c1ddfa801ee6e9b"
-
 "angular-google-place@file:../package/angular-google-place-0.0.3.tgz":
   version "0.0.3"
   resolved "file:../package/angular-google-place-0.0.3.tgz#0704f788b712d0943907faf53f062b09ae4a0bea"