Angular2 Detecta si el elemento en la vista de plantilla tiene clase
Estamos usando bootstrap, y a veces agrega clases automáticamente a los elementos DOM. ¿Cuál es la mejor manera de adjuntar a estos elementos y detectar cuándo se agrega una clase css particular a un elemento hijo de plantilla componente?
Digamos que tengo este componente:
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) { }
}
Y esta es una parte de mi plantilla de vista:
<header-comp>
<li class="nav-header-icon-list-item">
<div class="overlay-dropdown dropdown" id="patientDDL">
<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">
<img data-initials="ER" src="https://lorempixel.com/40/40/abstract/" class="img-circle session-user-profile-img">
¿Cómo detecto en mi componente cuando bootstrap agrega la clase "abierta" al elemento #patientDDL y ejecuto una función en mi componente?
¡Gracias!
EDITAR: modifiqué mi componente a esto según la solución de Gunter, pero obtengo una referencia nula cuando no precedo los criterios con una verificación nula)
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 && this.patientDropDownList.nativeElement.classList.contains('open')) {
this._headerService.setPatientDDLOpen(true);
} else {
this._headerService.setPatientDDLOpen(false);
}
}
}
Además, el estado de la consola se registra 4 veces mientras se carga la plantilla, pero nunca se vuelve a invocar, incluso después de que la clase se haya agregado / eliminado varias veces.
Esto es angular2 rc1 no estoy seguro si eso es relevante.