title: Angular2 Detect if element in template view has class
body: <p>We're using bootstrap, and sometimes it automatically adds classes to DOM elements.  What is the best way to attach to these elements and detect when a particalr css class is added to a component template child element?</p>
  
  <p>Say i have this component:</p>
  
  <pre><code>import { Component, ViewChild, ElementRef } from '@angular/core';
  import { HeaderService } from './header.service';
  
  @Component({
      selector: 'header-comp',
      templateUrl: './Home/RenderLayoutHeader'
  })
  
  export class HeaderLayoutComponent {
      constructor(private _headerService: HeaderService) { }
  }
  </code></pre>
  
  <p>And this is a portion of my view template:</p>
  
  <pre><code>&lt;header-comp&gt;      
  &lt;li class="nav-header-icon-list-item"&gt;
                          &lt;div class="overlay-dropdown dropdown" id="patientDDL"&gt;
                              &lt;button  class="btn btn-default dropdown-toggle session-menu-container" type="button" id="session-dropdown-menu" data-toggle="dropdown" data-backdrop="true" data-dismiss="modal"  aria-haspopup="true" aria-expanded="false"&gt;
                                  &lt;img data-initials="ER" src="https://lorempixel.com/40/40/abstract/" class="img-circle session-user-profile-img"&gt;
  </code></pre>
  
  <p>How do i detect in my component when bootstrap adds "open" class to #patientDDL element and execute a function in my component?</p>
  
  <p>Thanks!</p>
  
  <p>EDIT:
  I modified my component to this per Gunter's solution but I'm getting a null reference when i don't precede the criteria with a null check)</p>
  
  <pre><code>import { Component, ViewChild, ElementRef, DoCheck } from '@angular/core';
  import { HeaderService } from './header.service';
  
  @Component({
      selector: 'header-comp',
      templateUrl: './Home/RenderLayoutHeader'
  })
  
  export class HeaderLayoutComponent implements DoCheck {
  
      @ViewChild('patientDDL') patientDropDownList: ElementRef;
  
      constructor(private _headerService: HeaderService) { }
  
      ngDoCheck() {
          console.log('ngDoCheck called');
          if (this.patientDropDownList &amp;&amp; this.patientDropDownList.nativeElement.classList.contains('open')) {
              this._headerService.setPatientDDLOpen(true);
          } else {
              this._headerService.setPatientDDLOpen(false);
          }
  
      }
  }
  </code></pre>
  
  <p>Also the console statment is logged 4 times while the template loads but then it is never invoked again, even after the class has been added/removed multiple times.</p>
  
  <p>This is angular2 rc1 not sure if that is relevant.</p>