title: Clear button is not resetting the selected values in dropdown in angular 6
body: <p>I have 2 dropdowns on my page which I want to clear when I hit the clear button. Can someone please take a look at the code below and help me out if I am missing something. New to angular and so sorry if this is something very obvious. Thanks in advance!</p>
  
  <p>The code for clear button is as shown below </p>
  
  <pre><code>   &lt;form name="myform" #f="ngForm" novalidate&gt;
      &lt;fieldset&gt;
        &lt;div class="tab-content"&gt;
          &lt;div ng-if="paramId == jobExecution" id="jobExecution" class="tab-pane in active"&gt;
            &lt;div style='text-align: left'&gt;&lt;h6&gt;Enter Data &lt;/h6&gt;&lt;/div&gt;
            &lt;div class="space"&gt;&lt;/div&gt;
              &lt;div class="row"&gt;
  
                &lt;div class="col-xs-12 col-sm-3"&gt;
                    &lt;div class="form-group"&gt;
                        &lt;label for="form-field-8" &gt;Select a value&lt;/label&gt;
                        &lt;select class="form-control" id="form-field-select-1" name="study" [(ngModel)]="jobExecDetails.study" &gt;
                            &lt;option value="" &gt;Select an option&lt;/option&gt;
                            &lt;option value="1"&gt;1&lt;/option&gt;
                            &lt;option value="2"&gt;2&lt;/option&gt;
                            &lt;option value="3"&gt;3&lt;/option&gt;
                        &lt;/select&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div class="col-xs-12 col-sm-3"&gt;
                    &lt;div class="form-group"&gt;
                        &lt;label for="form-field-8"&gt;Select Domain&lt;/label&gt;
                        &lt;select class="form-control" id="form-field-select-1" name="domain" [(ngModel)]="jobExecDetails.domain"&gt;
                            &lt;option value="" &gt;Select an option&lt;/option&gt;
                            &lt;option value="1"&gt;Domain 1&lt;/option&gt;
                            &lt;option value="2"&gt;Domain 2&lt;/option&gt;
                            &lt;option value="3"&gt;Domain 3&lt;/option&gt;
                            &lt;option value="4"&gt;Domain 4&lt;/option&gt;
                        &lt;/select&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div class="col-xs-12 col-sm-6"&gt;
                    &lt;div class="form-group"&gt;
                      &lt;br&gt;&lt;br&gt;
                        &lt;button (click)="submit(jobExecDetails)" class="btn btn-default"&gt;Submit&lt;/button&gt;
                        &amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&lt;button class="btn btn-inverse"
                        (click)="reset(jobExecDetails)"&gt;Clear&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/fieldset&gt;
    &lt;/form&gt;
  
  And in my component.ts file, the function looks like this
  
  
  
   public reset(jobExecDetails): void {
      this.jobExecDetails = '';
      this.view = '';
    }
  </code></pre>