title: TypeError: Cannot read property 'slice' of undefined ng2-bootstrap typeahead
body: <p>I'm trying to setup a Google Maps Autocomplete. But I'm getting this error</p>
  
  <pre><code>TypeError: Cannot read property 'slice' of undefined 
  </code></pre>
  
  <p>I've followed the example here: <a href="https://valor-software.com/ng2-bootstrap/index-bs4.html#/typeahead" rel="nofollow">https://valor-software.com/ng2-bootstrap/index-bs4.html#/typeahead</a></p>
  
  <p>In my controller:</p>
  
  <pre><code>this.googleLocation = Observable.create((observer:any) =&gt; {
        // Runs on every search
        observer.next(this.locationSearch);
      }).mergeMap((token:string) =&gt; this.getPredictions(token))
  </code></pre>
  
  <p>getPredictions function:</p>
  
  <pre><code>getPredictions (value) {
      return Observable.of(
          this.autocompleteService.getQueryPredictions({
              input: value
          }, function(result, status) {
  
              if (status == google.maps.places.PlacesServiceStatus.OK) {
              console.log(result);
  
  
              return result;
              } else if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
              return [];
              } else {
              console.log(status)
              }
          })
      );
  }
  </code></pre>
  
  <p>and my view looks like this:</p>
  
  <pre><code>&lt;input [(ngModel)]="locationSearch"
              name="locationSearch"
              [typeahead]="googleLocation"
              [typeaheadOptionsLimit]="7"
              [typeaheadWaitMs]="300"
              [typeaheadAsync]="false"
              (typeaheadOnSelect)="typeaheadOnSelect($event)"
              (typeaheadLoading)="changeTypeaheadLoading($event)"
              (typeaheadNoResults)="changeTypeaheadNoResults($event)"
              (typeaheadOnSelect)="typeaheadOnSelect($event)"
              [typeaheadOptionField]="'description'"
              placeholder="Locations loaded with timeout"
              class="form-control"&gt;
  </code></pre>
  
  <p>I'm getting the following dump in my console.</p>
  
  <pre><code>EXCEPTION: TypeError: Cannot read property 'slice' of undefined
  browser_adapter.ts:82 EXCEPTION: TypeError: Cannot read property 'slice' of undefinedBrowserDomAdapter.logError @ browser_adapter.ts:82BrowserDomAdapter.logGroup @ browser_adapter.ts:93ExceptionHandler.call @ exception_handler.ts:58(anonymous function) @ application_ref.ts:374schedulerFn @ async.ts:148SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:133onError @ ng_zone.ts:142onHandleError @ ng_zone_impl.ts:95ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
  browser_adapter.ts:82 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:82ExceptionHandler.call @ exception_handler.ts:61(anonymous function) @ application_ref.ts:374schedulerFn @ async.ts:148SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:133onError @ ng_zone.ts:142onHandleError @ ng_zone_impl.ts:95ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
  browser_adapter.ts:82 TypeError: Cannot read property 'slice' of undefined
      at SafeSubscriber.eval [as _next] (typeahead.directive.js:186)
      at SafeSubscriber.__tryOrUnsub (Subscriber.ts:240)
      at SafeSubscriber.next (Subscriber.ts:192)
      at Subscriber._next (Subscriber.ts:133)
      at Subscriber.next (Subscriber.ts:93)
      at MergeMapSubscriber.notifyNext (mergeMap.ts:144)
      at InnerSubscriber._next (InnerSubscriber.ts:17)
      at InnerSubscriber.Subscriber.next (Subscriber.ts:93)
      at MergeMapSubscriber.notifyNext (mergeMap.ts:144)
      at InnerSubscriber._next (InnerSubscriber.ts:17)BrowserDomAdapter.logError @ browser_adapter.ts:82ExceptionHandler.call @ exception_handler.ts:62(anonymous function) @ application_ref.ts:374schedulerFn @ async.ts:148SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:133onError @ ng_zone.ts:142onHandleError @ ng_zone_impl.ts:95ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
  Subscriber.ts:243 Uncaught TypeError: Cannot read property 'slice' of undefined(anonymous function) @ typeahead.directive.js:186SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93MergeMapSubscriber.notifyNext @ mergeMap.ts:144InnerSubscriber._next @ InnerSubscriber.ts:17Subscriber.next @ Subscriber.ts:93MergeMapSubscriber.notifyNext @ mergeMap.ts:144InnerSubscriber._next @ InnerSubscriber.ts:17Subscriber.next @ Subscriber.ts:93subscribeToResult @ subscribeToResult.ts:28MergeMapSubscriber._innerSub @ mergeMap.ts:128MergeMapSubscriber._tryNext @ mergeMap.ts:124MergeMapSubscriber._next @ mergeMap.ts:108Subscriber.next @ Subscriber.ts:93(anonymous function) @ createvent.component.ts:71Observable.subscribe @ Observable.ts:93Observable._subscribe @ Observable.ts:152MergeMapOperator.call @ mergeMap.ts:82Observable.subscribe @ Observable.ts:93subscribeToResult @ subscribeToResult.ts:32MergeMapSubscriber._innerSub @ mergeMap.ts:128MergeMapSubscriber._tryNext @ mergeMap.ts:124MergeMapSubscriber._next @ mergeMap.ts:108Subscriber.next @ Subscriber.ts:93DebounceTimeSubscriber.debouncedNext @ debounceTime.ts:71dispatchNext @ debounceTime.ts:89FutureAction.execute @ FutureAction.ts:30QueueScheduler.flush @ QueueScheduler.ts:24(anonymous function) @ FutureAction.ts:100ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:61ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423
  
  createvent.component.ts:82 [Object, Object, Object, Object, Object]
  </code></pre>
  
  <p>The Objects from createvent.component.ts:82 are Google location objects.</p>
  
  <p>Any help is appreciated.</p>
  
  <p><strong>UPDATE 1</strong>
  I saw the typeahead.ts and found that everytime <code>_matches</code> goes undefined. I feel that the map resolves the function, as soon as it hits getPrediction function.</p>
  
  <p>Thanks,</p>