Angular: How to temporarily highlight dom elements that have just changed?

Question

Before implementing a solution on my own I would like to know if there is a simple manner to change the style of an element (a brief highlight) when the data bound property value has just change.

There are lot of elements in my DOM so I do not not want to store and maintain a dedicated property in component.

My elements to highlight are traditional input form's elements:

    <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>

I heard about special class styles set by Angular2 on element with ngModel directive that could help do what I need but I could not find more about it.

Answer 1

The easiest and cleaner way I can think of is to implement 2 css classes like so:

.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;
}

and then affect both of them successively to the element. hope that helps