css - obtener - innerhtml que es

Angular2: ¿Cómo resaltar temporalmente los elementos dom que acaban de cambiar?

Question

Antes de implementar una solución por mi cuenta, me gustaría saber si hay una manera simple de cambiar el estilo de un elemento (una breve reseña) cuando el valor de la propiedad vinculada a datos simplemente ha cambiado.

Hay muchos elementos en mi DOM así que no quiero almacenar y mantener una propiedad dedicada en el componente.

Mis elementos a resaltar son los elementos del formulario de entrada tradicional:

    <tr field label="Lieu dépôt">
        <select class="cellinput" #lieuDepotBon [(ngModel)]="rapport.LieuDepotBon" (ngModelChange)="changeRapport({LieuDepotBon:$event})">
            <option [ngValue]="null"></option>
            <option [ngValue]="i" *ngFor="let depotBonChoice of DepotBonInterventionValues; let i = index">{{DepotBonIntervention[i]}}</option>
        </select>
    </tr>
    <tr field *ngIf="rapport.LieuDepotBon==DepotBonIntervention.Autre" label="Autre lieu">
        <input class="cellinput" #autreLieuDepotBon [(ngModel)]="rapport.AutreLieuDepotBon" (ngModelChange)="changeRapport({AutreLieuDepotBon:autreLieuDepotBon.value})" />
    </tr>

Escuché acerca de los estilos de clase especiales establecidos por Angular2 en el elemento con la directiva ngModel que podría ayudar a hacer lo que necesito, pero no pude encontrar más información al respecto.

Answer 1

La forma más fácil y limpia en la que puedo pensar es implementar 2 clases de CSS así:

.highlight{
    background-color: #FF0;
}
.kill-highlight{
    background-color: #AD310B;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

y luego afectan a ambos sucesivamente al elemento. Espero que ayude