<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>ng4-geoautocomplete documentation</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="./images/favicon.ico"> <link rel="stylesheet" href="./styles/style.css"> </head> <body> <div class="navbar navbar-default navbar-fixed-top visible-xs"> <a href="./" class="navbar-brand">ng4-geoautocomplete documentation</a> <button type="button" class="btn btn-default btn-menu fa fa-bars" id="btn-menu"></button> </div> <div class="xs-menu menu" id="mobile-menu"> <div id="book-search-input" role="search"> <input type="text" placeholder="Type to search"> </div> <nav> <ul class="list"> <li class="title"> <a href="./index.html">ng4-geoautocomplete documentation</a> </li> <li class="divider"></li> <li class="chapter"> <a data-type="chapter-link" href="./index.html"><span class="fa fa-home"></span>Getting started</a> <ul class="links"> <li class="link"> <a href="./index.html" class="active" ><span class="fa fa-file-text-o"></span>README</a> </li> <li class="link"> <a href="./overview.html" href="./overview.html" > <span class="fa fa-th"></span>Overview </a> </li> </ul> </li> <li class="chapter"> <a data-type="chapter-link" href="./modules.html" > <span class="fa fa-archive"></span> <span>Modules</span> <span class="menu-toggler fa fa-angle-up" data-toggle="collapse" data-target="#xs-modules-links" ></span> </a> <ul class="links collapse in" id="xs-modules-links" > <li class="link"> <a href="./modules/Ng4GeoautocompleteModule.html" >Ng4GeoautocompleteModule</a> </li> </ul> </li> <li class="chapter"> <div class="simple"> <span class="fa fa-cogs"></span> <span>Components</span> <span class="menu-toggler fa fa-angle-up" data-toggle="collapse" data-target="#xs-components-links" ></span> </div> <ul class="links collapse in" id="xs-components-links" > <li class="link"> <a href="./components/AutoCompleteComponent.html" >AutoCompleteComponent</a> </li> </ul> </li> <li class="chapter"> <div class="simple"> <span class="fa fa-file-code-o"></span> <span>Classes</span> <span class="menu-toggler fa fa-angle-up" data-toggle="collapse" data-target="#xs-classes-links" ></span> </div> <ul class="links collapse in" id="xs-classes-links" > <li class="link"> <a href="./classes/BrowserGlobalRef.html" >BrowserGlobalRef</a> </li> <li class="link"> <a href="./classes/GlobalRef.html" >GlobalRef</a> </li> </ul> </li> <li class="chapter"> <div class="simple"> <span class="fa fa-long-arrow-down"></span> <span>Injectables</span> <span class="menu-toggler fa fa-angle-up" data-toggle="collapse" data-target="#xs-injectables-links" ></span> </div> <ul class="links collapse in" id="xs-injectables-links" > <li class="link"> <a href="./injectables/AutoCompleteSearchService.html" >AutoCompleteSearchService</a> </li> <li class="link"> <a href="./injectables/LocalStorageService.html" >LocalStorageService</a> </li> </ul> </li> <li class="divider"></li> <li class="copyright"> Documentation generated using <a href="https://compodoc.github.io/website/" target="_blank"> <img src=".//images/compodoc-vectorise.svg" class="img-responsive"> </a> </li> </ul> </nav> </div> <div class="container-fluid main"> <div class="row main"> <div class="hidden-xs menu"> <nav> <ul class="list"> <li class="title"> <a href="./index.html">ng4-geoautocomplete documentation</a> </li> <li class="divider"></li> <div id="book-search-input" role="search"> <input type="text" placeholder="Type to search"> </div> <li class="chapter"> <a data-type="chapter-link" href="./index.html"><span class="fa fa-home"></span>Getting started</a> <ul class="links"> <li class="link"> <a href="./index.html" class="active" ><span class="fa fa-file-text-o"></span>README</a> </li> <li class="link"> <a href="./overview.html" href="./overview.html" > <span class="fa fa-th"></span>Overview </a> </li> </ul> </li> <li class="chapter"> <a data-type="chapter-link" href="./modules.html" > <span class="fa fa-archive"></span> <span>Modules</span> <span class="menu-toggler fa fa-angle-up" data-toggle="collapse" data-target="#modules-links" ></span> </a> <ul class="links collapse in" id="modules-links" > <li class="link"> <a href="./modules/Ng4GeoautocompleteModule.html" >Ng4GeoautocompleteModule</a> </li> </ul> </li> <li class="chapter"> <div class="simple"> <span class="fa fa-cogs"></span> <span>Components</span> <span class="menu-toggler fa fa-angle-up" data-toggle="collapse" data-target="#components-links" ></span> </div> <ul class="links collapse in" id="components-links" > <li class="link"> <a href="./components/AutoCompleteComponent.html" >AutoCompleteComponent</a> </li> </ul> </li> <li class="chapter"> <div class="simple"> <span class="fa fa-file-code-o"></span> <span>Classes</span> <span class="menu-toggler fa fa-angle-up" data-toggle="collapse" data-target="#classes-links" ></span> </div> <ul class="links collapse in" id="classes-links" > <li class="link"> <a href="./classes/BrowserGlobalRef.html" >BrowserGlobalRef</a> </li> <li class="link"> <a href="./classes/GlobalRef.html" >GlobalRef</a> </li> </ul> </li> <li class="chapter"> <div class="simple"> <span class="fa fa-long-arrow-down"></span> <span>Injectables</span> <span class="menu-toggler fa fa-angle-up" data-toggle="collapse" data-target="#injectables-links" ></span> </div> <ul class="links collapse in" id="injectables-links" > <li class="link"> <a href="./injectables/AutoCompleteSearchService.html" >AutoCompleteSearchService</a> </li> <li class="link"> <a href="./injectables/LocalStorageService.html" >LocalStorageService</a> </li> </ul> </li> <li class="divider"></li> <li class="copyright"> Documentation generated using <a href="https://compodoc.github.io/website/" target="_blank"> <img src=".//images/compodoc-vectorise.svg" class="img-responsive"> </a> </li> </ul> </nav> </div> <div class="content readme"> <div class="content-data"> <p># Angular 4 compatible google autocomplete <a href="https://travis-ci.org/tanoy009/ng4-geoautocomplete"><img src="https://travis-ci.org/tanoy009/ng4-geoautocomplete.svg?branch=master" alt="Build Status" class="img-responsive"></a> <a href="https://codecov.io/gh/tanoy009/ng4-geoautocomplete"><img src="https://codecov.io/gh/tanoy009/ng4-geoautocomplete/branch/master/graph/badge.svg" alt="codecov" class="img-responsive"></a> <a href="http://badge.fury.io/js/ng4-geoautocomplete"><img src="https://badge.fury.io/js/ng4-geoautocomplete.svg" alt="npm version" class="img-responsive"></a> <a href="https://david-dm.org/tanoy009/ng4-geoautocomplete?type=dev"><img src="https://david-dm.org/tanoy009/ng4-geoautocomplete/dev-status.svg" alt="devDependency Status" class="img-responsive"></a> <a href="https://github.com/tanoy009/ng4-geoautocomplete/issues"><img src="https://img.shields.io/github/issues/tanoy009/ng4-geoautocomplete.svg" alt="GitHub issues" class="img-responsive"></a> <a href="https://github.com/tanoy009/ng4-geoautocomplete/stargazers"><img src="https://img.shields.io/github/stars/tanoy009/ng4-geoautocomplete.svg" alt="GitHub stars" class="img-responsive"></a> <a href="https://raw.githubusercontent.com/tanoy009/ng4-geoautocomplete/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="GitHub license" class="img-responsive"></a></p> <h2 id="demo">Demo</h2> <p><a href="https://tanoy009.github.io/ng4-geoautocomplete/">https://tanoy009.github.io/ng4-geoautocomplete/</a></p> <h2 id="test-case-">Test Case.</h2> <p>In Pipeline will be updated in a while.</p> <h2 id="table-of-contents">Table of contents</h2> <ul> <li><a href="#about">About</a></li> <li><a href="#installation">Installation</a></li> <li><a href="#documentation">Documentation</a></li> <li><a href="#development">Development</a></li> <li><a href="#license">License</a></li> </ul> <h2 id="about">About</h2> <p>angular 4 compatible google autocomplete with server side api support and AOT enabled</p> <h2 id="installation">Installation</h2> <p>Install through npm:</p> <pre class="line-numbers"><code class="language-none">npm install --save ng4-geoautocomplete</code></pre><p>Then include in your apps module:</p> <pre class="line-numbers"><code class="language-typescript">import { Component, NgModule } from '(angular/core'; import { Ng4GeoautocompleteModule } from 'ng4-geoautocomplete'; (NgModule({ imports: [ Ng4GeoautocompleteModule.forRoot() ] }) export class MyModule {}</code></pre><p>Add google place script in your main file generally referred to 'index.html' (Optional if you want to use google services).</p> <pre class="line-numbers"><code class="language-none"><script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true&key=XXReplace this with valid keyXX&libraries=places&language=en-US"></script></code></pre><p>Finally use in one of your apps components:</p> <pre class="line-numbers"><code class="language-typescript">import { Component } from '(angular/core'; (Component({ template: '<ng4geo-autocomplete (componentCallback)="autoCompleteCallback1($event)"></ng4geo-autocomplete>' }) export class MyComponent { autoCompleteCallback1(selectedData:any) { //do any necessery stuff. } }</code></pre><p>List of settings that can be used to configure the module (all config. are optional):</p> <pre class="line-numbers"><code class="language-typescript"> { geoPredictionServerUrl?: string; //should be a server url which returns list of places upon input query (GET request) geoLatLangServiceUrl?: string; //should be a server url which returns place object upon lat and lon. (GET request) geoLocDetailServerUrl?: string; //should be a server url which returns place details upon placeID received by 'geoPredictionServerUrl' (GET request) geoCountryRestriction?: any; //should be an array of country code where search should be restricted like ['in', 'us', 'pr', 'vi', 'gu', 'mp'] *(Default: 'no restriction')* geoTypes?: any; //should be an array of Place types defined by [Google api](https://developers.google.com/places/web-service/autocomplete#place_types). geoLocation?: any; //should be an array in the format [latitude,longitude]. This feature will not work if country restriction is implimented. geoRadius?: number; //should be a number and should only be used with 'geoLocation'. serverResponseListHierarchy?: any; //should be an array of key from where 'geoPredictionServer' data should be extracted. (see Example.) serverResponseatLangHierarchy?: any; //should be an array of key from where 'geoLatLangService' data should be extracted. (see Example.) serverResponseDetailHierarchy?: any; //should be an array of key from where 'geoLocDetailSerice' data should be extracted. (see Example.) resOnSearchButtonClickOnly?: boolean; //when output should be emmited when search button clicked only. useGoogleGeoApi?: boolean; //should set to 'false' when server urls to be used instade of google api. *(Default: true)* inputPlaceholderText?: string; //Input Placeholder text can be changed *(Default: 'Enter Area Name')* inputString?: string; //Default selected input like prefefined address. *(Default: ''). See Example 3 in Demo after 10 sec* showSearchButton?: boolean; //Search button to be visible or not. *(Default: true)* showRecentSearch?: boolean; //Recent search to be saved & shown to user or not. *(Default: true)* showCurrentLocation?: boolean; //current location option to be visible or not. *(Default: true)* recentStorageName?: string; //Recent seraches are saved in browser localsorage. The key value which is used by the module to save can be changed. *(Default: 'recentSearches')* noOfRecentSearchSave?: number; //Number of recent user entry to be saved . *(Default: 5)* currentLocIconUrl?: string; //Current location icon can be changed *(Should be an image url or svg url)* searchIconUrl?: string; //Search icon can be changed *(Should be an image url or svg url)* locationIconUrl?: string; //Genetal Location icon can be changed *(Should be an image or svg url)* }</code></pre><h4 id="note-component-settings-can-also-be-altered-after-component-initialization-please-follow-the-below-method-to-change-">NOTE: Component settings can also be altered after component initialization. Please follow the below method to change.</h4> <pre class="line-numbers"><code class="language-typescript">this.userSettings: any = { inputPlaceholderText: 'This is the placeholder text doring component initialization' } this.userSettings['inputPlaceholderText'] = 'This is the placeholder text after doing some external operation after some time'; this.userSettings = Object.assign({},this.userSettings) //Very Important Line to add after modifying settings.</code></pre><h4 id="note-">NOTE:</h4> <p>'geoTypes' can be used for multiple Place Types like <code>['(regions)', '(cities)']</code> OR <code>['(regions)', 'establishment', 'geocode']</code>. This will make individual api call for each Place Types to google to fetch lists and then it will merge the resuts with uniqueness.To know avalable Place Types please refer <a href="https://developers.google.com/places/web-service/autocomplete#place_types">Google api</a>.USE THIS FEATURE CAREFULLY<br/><br/></p> <h3 id="you-may-also-find-it-useful-to-view-the-demo-source-https-github-com-tanoy009-ng4-geoautocomplete-blob-master-demo-demo-component-ts-">You may also find it useful to view the <a href="https://github.com/tanoy009/ng4-geoautocomplete/blob/master/demo/demo.component.ts">demo source</a>.</h3> <h3 id="you-can-use-it-with-system-js-as-well">You can use it with system js as well</h3> <p><code>'ng4-geoautocomplete': 'npm:ng4-geoautocomplete/bundles/ng4-geoautocomplete.umd.js'</code></p> <h3 id="usage-without-a-module-bundler">Usage without a module bundler</h3> <pre class="line-numbers"><code class="language-none"><script src="node_modules/ng4-geoautocomplete/bundles/ng4-geoautocomplete.umd.js"></script> <script> // everything is exported ng4Geoautocomplete namespace </script></code></pre><h2 id="documentation">Documentation</h2> <p>All documentation is auto-generated from the source via <a href="https://compodoc.github.io/compodoc/">compodoc</a> and can be viewed here: <a href="https://tanoy009.github.io/ng4-geoautocomplete/docs/">https://tanoy009.github.io/ng4-geoautocomplete/docs/</a></p> <h2 id="development">Development</h2> <h3 id="prepare-your-environment">Prepare your environment</h3> <ul> <li>Install <a href="http://nodejs.org/">Node.js</a> and NPM</li> <li>Install local dev dependencies: <code>npm install</code> while current directory is this repo</li> </ul> <h3 id="development-server">Development server</h3> <p>Run <code>npm start</code> to start a development server on port 8000 with auto reload + tests.</p> <h3 id="testing">Testing</h3> <p>Run <code>npm test</code> to run tests once or <code>npm run test:watch</code> to continually run tests.</p> <h3 id="release">Release</h3> <ul> <li>Bump the version in package.json (once the module hits 1.0 this will become automatic)<pre class="line-numbers"><code class="language-bash">npm run release</code></pre></li> </ul> <h2 id="license">License</h2> <p>MIT</p> </div><div class="search-results"> <div class="has-results"> <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1> <ul class="search-results-list"></ul> </div> <div class="no-results"> <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1> </div> </div> </div> </div> </div> <script src="./js/libs/bootstrap-native.js"></script> <script src="./js/libs/es6-shim.min.js"></script> <script src="./js/libs/EventDispatcher.js"></script> <script src="./js/libs/promise.min.js"></script> <script src="./js/libs/zepto.min.js"></script> <script src="./js/compodoc.js"></script> <script>var COMPODOC_CURRENT_PAGE_DEPTH = 0;</script> <script src="./js/search/search.js"></script> <script src="./js/search/lunr.min.js"></script> <script src="./js/search/search-lunr.js"></script> <script src="./js/tabs.js"></script> <script src="./js/menu.js"></script> <script src="./js/libs/prism.js"></script> <script src="./js/sourceCode.js"></script> <script src="./js/search/search_index.js"></script> </body> </html>