How to clear the typeahead input after a result is selected?

The issue you witnessing arises from the fact that the NgModel directive is updating model binding asynchronously and the actual model is updated after the onSelect method gets executed. So your model update gets overridden by the NgModel functionality.

Fortunately we (ng-bootstrap authors) got all the flex points in place to cover your use-case :-) There are a couple of things that you could do.

Firstly the $event object passed to the onSelect method has the preventDefault() method and you can call it to veto item selection (and as a result writing back to the model and input field update).

$event.preventDefault() will make sure that the model is not updated and the input field is not updated with the selected item. But text entered by a user will still be part of the input so if you want to clear up this as well you can directly update the input's value property.

Here is code demonstrating all those techniques together:

onSelect($event, input) {
    $event.preventDefault();
    this.selected.push($event.item);
    input.value = '';
  }

where input argument is a reference to the input DOM element:

<input type="text" class="form-control" #input 
   [ngbTypeahead]="search" (selectItem)="onSelect($event, input)">

Finally here is a plunker showing all this in practice: http://plnkr.co/edit/kD5AmZyYEhJO0QQISgbM?p=preview

The above one is template ref value solution.

This is for ngModel solution.

Html code:

<input type="text" class="form-control" [resultTemplate]="resultTemplate" (selectItem)="onSelect($event)"
       [(ngModel)]="model" placeholder="Start typing a customer name..." [ngbTypeahead]="search"/>

Component code:

onSelect($event) {
    $event.preventDefault();
    this.model = null;
    this.router.navigate(['/customers', $event.item.resource.id]);
};

$event.preventDefault();

for ngModel value change empty