<!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 &#39;&#40;angular/core&#39;;
import { Ng4GeoautocompleteModule } from &#39;ng4-geoautocomplete&#39;;

&#40;NgModule({
  imports: [
    Ng4GeoautocompleteModule.forRoot()
  ]
})
export class MyModule {}</code></pre><p>Add google place script in your main file generally referred to &#39;index.html&#39; (Optional if you want to use google services).</p>
<pre class="line-numbers"><code class="language-none">&lt;script type=&quot;text/javascript&quot; src=&quot;https://maps.google.com/maps/api/js?sensor=true&amp;key=XXReplace this with valid keyXX&amp;libraries=places&amp;language=en-US&quot;&gt;&lt;/script&gt;</code></pre><p>Finally use in one of your apps components:</p>
<pre class="line-numbers"><code class="language-typescript">import { Component } from &#39;&#40;angular/core&#39;;

&#40;Component({
  template: &#39;&lt;ng4geo-autocomplete (componentCallback)=&quot;autoCompleteCallback1($event)&quot;&gt;&lt;/ng4geo-autocomplete&gt;&#39;
})
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 &#39;geoPredictionServerUrl&#39; (GET request)
    geoCountryRestriction?: any;          //should be an array of country code where search should be restricted like [&#39;in&#39;, &#39;us&#39;, &#39;pr&#39;, &#39;vi&#39;, &#39;gu&#39;, &#39;mp&#39;] *(Default: &#39;no restriction&#39;)*
    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 &#39;geoLocation&#39;.
    serverResponseListHierarchy?: any;    //should be an array of key from where &#39;geoPredictionServer&#39; data should be extracted. (see Example.)
    serverResponseatLangHierarchy?: any;  //should be an array of key from where &#39;geoLatLangService&#39; data should be extracted. (see Example.)
    serverResponseDetailHierarchy?: any;  //should be an array of key from where &#39;geoLocDetailSerice&#39; data should be extracted. (see Example.)
    resOnSearchButtonClickOnly?: boolean; //when output should be emmited when search button clicked only.
    useGoogleGeoApi?: boolean;            //should set to &#39;false&#39; when server urls to be used instade of google api. *(Default: true)*
    inputPlaceholderText?: string;        //Input Placeholder text can be changed *(Default: &#39;Enter Area Name&#39;)*
    inputString?: string;                 //Default selected input like prefefined address. *(Default: &#39;&#39;). 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 &amp; 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: &#39;recentSearches&#39;)*
    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: &#39;This is the placeholder text doring component initialization&#39;
}

this.userSettings[&#39;inputPlaceholderText&#39;] = &#39;This is the placeholder text after doing some external operation after some time&#39;;
this.userSettings = Object.assign({},this.userSettings) //Very Important Line to add after modifying settings.</code></pre><h4 id="note-">NOTE:</h4>
<p>&#39;geoTypes&#39; can be used for multiple Place Types like <code>[&#39;(regions)&#39;, &#39;(cities)&#39;]</code> OR <code>[&#39;(regions)&#39;, &#39;establishment&#39;, &#39;geocode&#39;]</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>&#39;ng4-geoautocomplete&#39;: &#39;npm:ng4-geoautocomplete/bundles/ng4-geoautocomplete.umd.js&#39;</code></p>
<h3 id="usage-without-a-module-bundler">Usage without a module bundler</h3>
<pre class="line-numbers"><code class="language-none">&lt;script src=&quot;node_modules/ng4-geoautocomplete/bundles/ng4-geoautocomplete.umd.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
    // everything is exported ng4Geoautocomplete namespace
&lt;/script&gt;</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>