title: Angular - pre-select a select option with [ngValue] [(ngModel)] being objects
body: <p><strong>Goal</strong></p>
  
  <p>I want to pre-select an option of a select with [ngValue] and [(ngModel)] with the values being an object TypeConge:</p>
  
  <pre><code>{ "id": 2, "libelle": "Holidays" }
  </code></pre>
  
  <p><strong>First Try</strong></p>
  
  <pre><code>            &lt;div class="form-group col-12"&gt;
                  &lt;label class="font-weight-bold" for="typeConge"&gt; Type congé &lt;/label&gt;
                  &lt;select class="form-control" id="typeConge" name="typeConge"  [(ngModel)]="conge.typeConge" &gt;
                      &lt;option [ngValue]="null"&gt;&lt;/option&gt;
                      &lt;option [ngValue]="typeCongeOption" *ngFor="let typeCongeOption of typeConges; trackBy: trackTypeCongeById"&gt;{{typeCongeOption.libelle}}&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              {{conge.typeConge| json}}
  </code></pre>
  
  <p>Problem: The select option is not preselected.</p>
  
  <p><strong>Second Try</strong></p>
  
  <pre><code>            &lt;div class="form-group col-12"&gt;
                  &lt;label class="font-weight-bold" for="typeConge"&gt; Type congé &lt;/label&gt;
                  &lt;select class="form-control" id="typeConge" name="typeConge" [compareWith] = 'customCompareTypeConge' [(ngModel)]="conge.typeConge" &gt;
                      &lt;option [ngValue]="null"&gt;&lt;/option&gt;
                      &lt;option [ngValue]="typeCongeOption" *ngFor="let typeCongeOption of typeConges; trackBy: trackTypeCongeById"&gt;{{typeCongeOption.libelle}}&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              {{conge.typeConge| json}}
  </code></pre>
  
  <p>...</p>
  
  <pre><code>customCompareTypeConge(tc1: TypeConge, tc2: TypeConge){
          return tc1.id == tc2.id;
      }
  </code></pre>
  
  <p>Problem: In the console I find: Cannot read property 'id' of null</p>
  
  <p><strong>EDIT</strong> </p>
  
  <p><a href="https://stackblitz.com/edit/angular-wpr3sq" rel="nofollow noreferrer">Link to stackblitz.</a></p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>A full explanation of this issue can be found at <a href="https://www.romaniancoder.com/angular-4-custom-comparison-function-select-comparewith/" rel="nofollow noreferrer">this adress</a>.</p>
  
  <p>Could you help me please?</p>
  
  <p>Thanks!</p>