title: Angular 5 select and default value with enum values
body: <p>I am trying to set a default value at a select option with Angular 5.
  I have read about the [compareWith] but it does not seem to help.
  Here is the code:</p>
  
  <p><strong>My enumeration:</strong></p>
  
  <pre><code>export enum EncryptionProtocol {
      NONE,
      SSL,
      TLS }
  </code></pre>
  
  <p><strong>My Config Model</strong></p>
  
  <pre><code>export class Config implements BaseEntity {
      constructor(
          public id?: number,
          ...
          public encryptionProtocol?: EncryptionProtocol,
          ...
      ) {
      }
  }
  </code></pre>
  
  <p><strong>My HTML:</strong></p>
  
  <pre><code>    &lt;div class="form-group"&gt;
          &lt;label class="form-control-label" for="field_encryptionProtocol"&gt;Encryption Protocol&lt;/label&gt;
          &lt;select  [compareWith]="compareFn" class="form-control" name="encryptionProtocol" [(ngModel)]="config.encryptionProtocol"
                  id="field_encryptionProtocol"&gt;
              &lt;option *ngFor="let encryptionProtocol of encryptionProtocolKeys()" [ngValue]="encryptionProtocol"&gt;
                  {{encryptionProtocol}}
              &lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT: My TS:</strong></p>
  
  <pre><code>...
      encryptionProtocols = EncryptionProtocol;
  
      encryptionProtocolKeys() : Array&lt;string&gt; {
          var keys = Object.keys(this.encryptionProtocols);
          return keys.slice(keys.length / 2);
      }
  
  ...
  
  compareFn(c1: EncryptionProtocol, c2: EncryptionProtocol): boolean {
      console.log('compare function');
      console.log(c1);
      console.log(c2);
      console.log(c1 &amp;&amp; c2 ? c1.valueOf() === c2.valueOf() : c1 === c2);
      return c1 &amp;&amp; c2 ? c1.valueOf() === c2.valueOf() : c1 === c2;
  }
  ...    
      ngOnInit() {
         this.config = {encryptionProtocol: EncryptionProtocol.NONE, headers: []};
      }
  </code></pre>
  
  <p><strong>and the output at the console is:</strong></p>
  
  <pre><code>compare function
  NONE
  undefined
  false
  compare function
  NONE
  undefined
  false
  compare function
  SSL
  undefined
  false
  compare function
  NONE
  undefined
  false
  compare function
  SSL
  undefined
  false
  compare function
  TLS
  undefined
  false
  {encryptionProtocol: 0, headers: Array(0)}
  0
  compare function
  NONE
  null
  false
  compare function
  SSL
  null
  false
  compare function
  TLS
  null
  false
  compare function
  NONE
  0
  false
  compare function
  SSL
  0
  false
  compare function
  TLS
  0
  false
  compare function
  NONE
  SSL
  false
  compare function
  SSL
  SSL
  true
  </code></pre>
  
  <p>You will notice that at the end the last <strong>'compare function'</strong> block is <strong>true</strong>. And the pre-selected value at the drop down is the <strong><em>SSL</em></strong> although I have set the <strong><em>NONE</em></strong> at the onInit method.
  Do you have any idea why this is happening and what should I do in order to select the correct value?</p>
  
  <p><strong>UPDATE:</strong>
  Here is the response from the server:</p>
  
  <pre><code>{
    "id" : 50000,
    ...
    "encryptionProtocol" : "SSL",
    "keystoreType" : "PKCS12",
    ...
  }
  </code></pre>
  
  <p>and here is the code that assigns this object to the model:</p>
  
  <pre><code>private subscribeToSaveResponse(result: Observable&lt;HttpResponse&lt;Config&gt;&gt;) {
      result.subscribe((res: HttpResponse&lt;Config&gt;) =&gt;
          this.onSaveSuccess(res.body), (res: HttpErrorResponse) =&gt; this.onSaveError());
  }
  
  private onSaveSuccess(config: Config) {
      this.isSaving = false;
      this.config = config;
  }
  </code></pre>
  
  <p>but although the default selection works ok when we set it from the onInit method it does not when it comes back from the server.
  I suspect the reason is that it comes as a string. Should I convert it to an enumeration value? What is the best way to do this?  </p>
  
  <p>Thank you in advance,</p>