title: Wrap ngx-bootstrap/typeahead in an Angular Directive
body: <p>I'm using ngx-bootstrap/typeahead to have an autocomplete in my page. This is the code that I'm currently using:</p>
  
  <pre><code>&lt;input type="text" class="form-control" name="countryName" autocomplete="off" [(ngModel)]="asyncSelected" (blur)="typeaheadOnBlur()" [typeahead]="countryDataSource" (typeaheadOnSelect)="typeaheadOnSelect($event)" typeaheadWaitMs="300" typeaheadOptionField="name"&gt;
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>asyncSelected: string;
  
  constructor() {
      this.countryDataSource = Observable.create((observer: any) =&gt; {
          observer.next(this.asyncSelected);
      }).mergeMap((input: string) =&gt; this.getAutoCompleteResults(input));
  }
  
  typeaheadOnSelect(event: TypeaheadMatch): void {
      viewModel.nestedProperty.country = event.item.name;
      viewModel.nestedProperty.countryCode = event.item.countryCode;
  }
  
  typeaheadOnBlur(): void {
      viewModel.nestedProperty.country = asyncSelected;
  }
  </code></pre>
  
  <p><code>getAutoCompleteResults()</code> returns an array of objects (observable) in the following format:</p>
  
  <pre><code>[{id: 1, name: "Australia", code: "AU"}, {id: 2, name: "United States", code: "US"}, ...]
  </code></pre>
  
  <p>Now, I think the code in my component does not belong to the component that is just using autocomplete. It also does not make it reusable that much. I don't want to have all these codes in the component and all those <code>(blur)="typeaheadOnBlur()"</code>, <code>typeaheadWaitMs="300"</code> every time that I want to use my auto complete I'm thinking of creating a directive to use it as follows:</p>
  
  <pre><code>&lt;input [myAutoComplete] [ngModel]="viewModel.nestedProperty?.country" (NgModelChange)="viewModel.nestedProperty.country=$event" (select)="mySelectFunction(???)" /&gt;
  </code></pre>
  
  <p>As you might have noticed, I couldn't use <code>viewModel.nestedProperty.country</code> for my binding with ngx-bootstrap. Looks like that this <code>$event</code> has different structure than ngx-bootstrap <code>$event</code> in the <code>typeaheadOnSelect($event)</code>.</p>
  
  <p>I also don't know how to handle <code>(select)="mySelectFunction(???)"</code>. How do you suggest I can make this autocomplete more reusable for my project?</p>