title: How to clear the typeahead input after a result is selected?
body: <p>I'm using the <a href="https://ng-bootstrap.github.io/#/components/typeahead" rel="noreferrer">ng-bootstrap typeahead</a> component to search a customer database. When the user selects a customer from the typeahead results list, I navigate to a customer details page. I've got this working, but I want to clear the input field after navigation has taken place. I've tried setting the model to null or an empty string in the <code>selectItem</code> event logic, but this isn't working:</p>
  
  <p><strong>customer-search-typeahead.component.html</strong></p>
  
  <pre><code>&lt;template #resultTemplate let-r="result" let-t="term"&gt;
    &lt;div&gt;
      &lt;div&gt;
        {{r.resource.name[0].given}} {{r.resource.name[0].family}}
      &lt;/div&gt;
      &lt;div&gt;
        {{r.resource.birthDate | date: 'dd/MM/yyyy'}}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;input type="text" class="form-control" [resultTemplate]="resultTemplate" (selectItem)="onSelect($event)"
         [(ngModel)]="model" placeholder="Start typing a customer name..." [ngbTypeahead]="search"/&gt;
  </code></pre>
  
  <p><strong>customer-search-typeahead.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'customer-search-typeahead',
    template: require('./customer-search-typeahead.component.html'),
    styles: [`.form-control { width: 300px; }`]
  })
  export class CustomerSearchTypeaheadComponent {
  
    model: any;
    searching: boolean;
  
    constructor(private customerService: CustomerService, private router: Router) {}
  
    onSelect($event) {
      this.router.navigate(['/customers', $event.item.resource.id]);
      this.model = null;
    };
  
    search = (text$: Observable&lt;string&gt;) =&gt;
     //omitted for brevity
  }
  </code></pre>
  
  <p>The typeahead input looks like this after a selection has been made:</p>
  
  <p><a href="https://i.stack.imgur.com/MnAdQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MnAdQ.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p><strong>Solution</strong></p>
  
  <p><strong>customer-search-typeahead.component.html</strong></p>
  
  <pre><code>&lt;input type="text" class="form-control" #input [ngbTypeahead]="search" (selectItem)="onSelect($event); input.value='' "&gt;
  </code></pre>
  
  <p><strong>customer-search-typeahead.component.ts</strong></p>
  
  <pre><code>onSelect($event, input) {
      $event.preventDefault();
      this.router.navigate(['/customers', $event.item.resource.id]);
    };
  </code></pre>