title: Angular2 scroll to element that has *ngIf
body: <p>I am writing a form in Angular 2 where the user submits the form, it is validated and if there are any errors with the inputs, I want to scroll the user's browser to the first element with the class "error"</p>
  
  <p>The problem is, all of my errors use *ngIf like so:</p>
  
  <pre><code>&lt;input type="text" [(ngModel)]="model.first_name"&gt;
  &lt;div class="error" *ngIf="errors.first_name"&gt;
      {{errors.first_name}}
  &lt;/div&gt;
  </code></pre>
  
  <p>In my submit function</p>
  
  <pre><code>submit(){
     this.errors = this.validate();
     if(this.errors.any()){
        var errorDivs = document.getElementsByClassName("error");
        if(errorDivs.length &gt; 0){
           errorDivs[0].scrollIntoView();
        }
     }
  }
  </code></pre>
  
  <p>I realize this is because *ngIf removes the div from the DOM completely and the Angular check for changes hasn't been given a chance to run yet. Is there a clever and clean way to do this?</p>