title: How to dynamically add typeahead in ng-bootstrap? Angular 7/8
body: <p>I'm using ng-bootstrap as my front end design in Angular.</p>
  
  <p>I need to use its TypeAhead component which is this <a href="https://ng-bootstrap.github.io/#/components/typeahead/examples#focus" rel="nofollow noreferrer">TypeAhead of Ng-Bootstrap</a></p>
  
  <p>but the thing is I am implementing a FormArray. I need to dynamically add the TypeAhead. Its working fine until I used the "tab" key since it uses one instance, when I pressed tab it all opens at the same time.</p>
  
  <p><a href="https://i.stack.imgur.com/rBnWM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rBnWM.png" alt="enter image description here"></a></p>
  
  <p>I tried to have a work around.</p>
  
  <pre class="lang-js prettyprint-override"><code>focus(event, i) {
    this.focusArr[i] = new Subject&lt;string&gt;();
      this.focusArr[i].next(event)'
      this.indexCount = i;
    }  
  }
  
  click(event, i){
    this.clickArr[i] = new Subject&lt;string&gt;();
    this.clickArr[i].next(event);
    this.indexCount = i;
  }
  
  searchItem = (text$: Observable&lt;string&gt;) =&gt; {
    var click = this.clickArr[this.indexCount];
    var focus = this.focus[this.indexCount];
    const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
    const clicksWithClosedPopup$ = click.pipe(filter(() =&gt; !this.instance.isPopupOpen()));
    const inputFocus$ = focus;
  
    return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
      map(term =&gt; (term === '' ? this.itemListHolder
        : this.itemListHolder.filter(v =&gt; v.toLowerCase().indexOf(term.toString().toLowerCase()) &gt; -1)).slice(0, 10))
      );
  }
  </code></pre>
  
  <p>Then the html is:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input id="typeahead-focus" type="text" class="form-control" placeholder="Choose an Item" formControlName="itemSelected"
      [ngbTypeahead]="searchItem" (focus)="focus($event.target.value, i)"
      (click)="click($event.target.value, i)" #instance="ngbTypeahead" /&gt;
  </code></pre>
  
  <p>Here is the error message:</p>
  
  <blockquote>
    <p>You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.</p>
  </blockquote>
  
  <p>I have no idea anymore :(</p>