title: Typehead in ng2-bootstrap cannot show items in Angular 2
body: <blockquote>
    <p>UPDATED: It supports now nested property now. <a href="https://github.com/valor-software/ng2-bootstrap/issues/135" rel="nofollow">https://github.com/valor-software/ng2-bootstrap/issues/135</a></p>
  </blockquote>
  
  <hr>
  
  <p>I am using <a href="http://valor-software.com/ng2-bootstrap/" rel="nofollow">ng2-bootstrap</a> in Angular 2.</p>
  
  <p>I am trying to use Typeahead.</p>
  
  <p>The example code </p>
  
  <pre><code>private statesComplex:Array&lt;any&gt; = [
      {id: 1, name: 'Alabama'}, {id: 2, name: 'Alaska'}, {id: 3, name: 'Arizona'}];
  </code></pre>
  
  <p>and </p>
  
  <pre><code>&lt;input [(ngModel)]="selected"
         [typeahead]="statesComplex"
         (typeaheadOnSelect)="typeaheadOnSelect($event)"
         [typeaheadOptionField]="'name'"
         class="form-control"&gt;
  </code></pre>
  
  <p>runs well.</p>
  
  <p>But when I try to change the data format</p>
  
  <pre><code>private statesComplex:Array&lt;any&gt; = [
      {id: 1, profile: {name: 'Alabama', email: '111'}}, {id: 2, profile: {name: 'Alaska', email: '222'}}, {id: 3, profile: {name: 'Arizona', email: '333'}}];
  </code></pre>
  
  <p>and use</p>
  
  <pre><code>&lt;input [(ngModel)]="selected"
         [typeahead]="statesComplex"
         (typeaheadOnSelect)="typeaheadOnSelect($event)"
         [typeaheadOptionField]="'profile.name'"
         class="form-control"&gt;
  </code></pre>
  
  <p>It does not work. I think the problem is related with typeaheadOptionField, but I don't know how to write it.</p>
  
  <p>Thanks</p>