title: Choose by name et get the id in md-autocomplete input in angular 4 material application
body: <p>I have an angular 4 application with material design. In this application I have a form with an autocomplete field.</p>
  
  <p>This is my html code :</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="form-group"&gt;
    &lt;md-input-container&gt;
      &lt;input mdInput type="text" mdInput [mdAutocomplete]="project" [formControl]="projectCtrl" placeholder="Choose a project" [(ngModel)]="selectProjectForNewCollab" name="selectProjectForNewCollab"&gt;
    &lt;/md-input-container&gt;
    &lt;md-autocomplete #project="mdAutocomplete"&gt;
      &lt;md-option *ngFor="let project of filteredProjects | async" [value]="project.name"&gt;
        {{ project.name }}
      &lt;/md-option&gt;
    &lt;/md-autocomplete&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my ts code :</p>
  
  <pre class="lang-js prettyprint-override"><code>console.log("project = " + this.selectProjectForNewCollab);
  </code></pre>
  
  <p>So, I have <code>projects</code> with 3 fields : <code>{id: "1", name: "test", photo: "test"}</code>.
  I want to choose a project by its name but get back the id in return.
  Actually, I have choose with the name but I get the name at the end. If I change the <code>[value]="project.id"</code>, I get the id but it's teh id which is displayed in the input.</p>
  
  <p>So, do you know how I can do to get the id but choose by name and display the name in the input ?</p>