title: Angular 2 + reset component library control
body: <p>I have created an angular component library that I am installing via npm into my applications.</p>
  
  <p>I have a drop down that gets populated and used fine...the problem comes when I want to "reset" the component library controls to do a fresh selection.<br>
  I'm not sure how to do this?</p>
  
  <p><strong><em>This is my component library html for drop down control..</em></strong></p>
  
  <pre><code>  &lt;select [(ngModel)]='thisControl' name="nameControl" id="idControl" 
        (ngModelChange)="updateControl(thisControl)" class="form-control"&gt;
        &lt;option *ngFor="let control of controls" [value]="control.ControlID"&gt; 
        {{control.controlName}} ({{control.ControlCode}})&lt;/option&gt;
    &lt;/select&gt;  
  </code></pre>
  
  <p><strong><em>This is my component code...</em></strong></p>
  
  <pre><code>import { Component, OnInit, Output, EventEmitter, Input } from 
  '@angular/core';
  import { msControlDataService } from '../../services/ms-control-data- 
  service';
  
  @Component({
    selector: 'ms-control-name-id-code',
    templateUrl: './control-name-id-code.component.html',
    styleUrls: ['./control-name-id-code.component.scss']
  })
  export class ControlNameIdCodeComponent implements OnInit {
    agencies: any;
    constructor(private msControlDataService:msControlDataService) { }
  
    ngOnInit() {
      this.getAgencies();
    }
    @Input() currYear: any;
    @Output() selectedValue = new EventEmitter&lt;object&gt;();
    getAgencies(){
      this.msControlDataService.getControlListAD(this.currYear)
      .subscribe((data) =&gt; {
        this.agencies = data;
  
      });
    }
    updateControl(control){    
      this.selectedValue.emit(control);
    }
    thisControl:string = "";
  
  }
  </code></pre>
  
  <p><strong><em>This is my usage in my application...</em></strong></p>
  
  <p>I import the Module into app.module.ts
  and add my tag to the html...</p>
  
  <pre><code> &lt;ms-control-name-id-code [(currYear)]="currYear"  
  (selectedValue)="setControl($event)" &gt;&lt;/ms-control-name-id-code&gt; 
  </code></pre>
  
  <p>Like I said this all works as expected however I can't seem to figure out how to "reset" the control without doing a full page refresh or get at the ngModel of the control.</p>
  
  <p>any help is greatly appreciated!!</p>