Highlighting DOM elements that have recently been modified in Angular

Question

Highlighting DOM elements that have recently been modified in Angular

Is there a simple way to change the style of an element when a bound property value changes, without storing a dedicated property in the component?

The elements I want to highlight are input form 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 have heard about special class styles set by Angular2 on elements with ngModel directive that might help achieve what I need, but I haven't been able to find more information about it.

css angular typescript controlvalueaccessor

Answer 1

Answer №1

A simple and efficient solution would be to create two CSS classes for highlighting styles:

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

You can then apply these classes in sequence to the element as needed. I hope this suggestion proves helpful!

Answer 2

A simple and efficient solution would be to create two CSS classes for highlighting styles:

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

You can then apply these classes in sequence to the element as needed. I hope this suggestion proves helpful!

Answer 3

Answer №2

Here is the approach I took.

I aimed to emphasize the data in the Form that gets modified by other users in real-time.

To achieve this, I opted to replace native html elements in my HTML form with Angular components. For each type of native element, I designed a new Angular Component equipped with Highlight functionality. These components all implement the ControlValueAccessor Angular interface.

In the parent form, I swapped out the native element:

<input [(ngModel)]="itinerary.DetailWeather" />

with my custom element:

<reactive-input [(ngModel)]="itinerary.DetailWeather"></reactive-input>

Whenever Angular triggers detectChanges() for the parent form, it scrutinizes all the data inputs utilized by the form's components.

If a component serves as a ControlValueAccessor and an alteration transpires in the application model, it invokes the ControlValueAccessor.writeValue( value ) method. This method is invoked when there is a change in the data in memory. I utilized it as a means to momentarily update the style and incorporate the highlight.

The following snippet showcases the custom element. Angular Animations were leveraged to alter the border color and smoothly transition back to the original hue.

// Custom Element Code Here

Answer 4

Here is the approach I took.

I aimed to emphasize the data in the Form that gets modified by other users in real-time.

To achieve this, I opted to replace native html elements in my HTML form with Angular components. For each type of native element, I designed a new Angular Component equipped with Highlight functionality. These components all implement the ControlValueAccessor Angular interface.

In the parent form, I swapped out the native element:

<input [(ngModel)]="itinerary.DetailWeather" />

with my custom element:

<reactive-input [(ngModel)]="itinerary.DetailWeather"></reactive-input>

Whenever Angular triggers detectChanges() for the parent form, it scrutinizes all the data inputs utilized by the form's components.

If a component serves as a ControlValueAccessor and an alteration transpires in the application model, it invokes the ControlValueAccessor.writeValue( value ) method. This method is invoked when there is a change in the data in memory. I utilized it as a means to momentarily update the style and incorporate the highlight.

The following snippet showcases the custom element. Angular Animations were leveraged to alter the border color and smoothly transition back to the original hue.

// Custom Element Code Here

Answer 5

Answer №3

If you want to briefly highlight a DOM element, one way to do it is by using the setTimeout() function to add or remove a CSS class.

View demo

HTML

<mat-form-field [ngClass]="{'changed': isChanged}">
  <mat-select [(ngModel)]="yourModel" (ngModelChange)="modelChanged($event)">
     <mat-option value="1">1</mat-option>
     <mat-option value="2">2</mat-option>
     <mat-option value="3">3</mat-option>
  </mat-select>
</mat-form-field>

Typescript

isChanged: boolean = false
modelChanged(value) {
   console.log('model changed')

   this.isChanged = true
   setTimeout(() => {
       this.isChanged = false
   }, 1000);
}

CSS

.changed {
    transition: color 0.4s ease-in, text-shadow 0.4s ease-in, background-color 0.5s linear 0s;
    text-shadow: #bbb 2px 2px 2px;
    background-color: #ffffcc;
    color: #BF1722;
}

Note: If your application requires quicker changes, adjust the time in the setTimeout() function to either 0.5s or 0.3s.

Credit goes to Ingo Bürk for raising awareness about this issue

Answer 6

If you want to briefly highlight a DOM element, one way to do it is by using the setTimeout() function to add or remove a CSS class.

View demo

HTML

<mat-form-field [ngClass]="{'changed': isChanged}">
  <mat-select [(ngModel)]="yourModel" (ngModelChange)="modelChanged($event)">
     <mat-option value="1">1</mat-option>
     <mat-option value="2">2</mat-option>
     <mat-option value="3">3</mat-option>
  </mat-select>
</mat-form-field>

Typescript

isChanged: boolean = false
modelChanged(value) {
   console.log('model changed')

   this.isChanged = true
   setTimeout(() => {
       this.isChanged = false
   }, 1000);
}

CSS

.changed {
    transition: color 0.4s ease-in, text-shadow 0.4s ease-in, background-color 0.5s linear 0s;
    text-shadow: #bbb 2px 2px 2px;
    background-color: #ffffcc;
    color: #BF1722;
}

Note: If your application requires quicker changes, adjust the time in the setTimeout() function to either 0.5s or 0.3s.

Credit goes to Ingo Bürk for raising awareness about this issue

Highlighting DOM elements that have recently been modified in Angular

Answer №1

Answer №2

Answer №3

View demo

Similar questions

I am puzzled as to why I am receiving the error messages stating that [ngForm] is not recognized as a valid property for the form element, and that [ngClass] is not a recognized

What is the process for configuring PhpStorm to sync with TypeScript tsconfig.json in .vue files?

unable to retrieve information from the redis cache

When attempting to Dockerize an Angular CLI app, nothing seemed to happen

The dimensions of the d3 div remain constant despite any modifications to its attributes

Can you explain to me the significance of `string[7]` in TypeScript?

The ng test option is failing to execute effectively

The 8 x 8 grid I am constructing is functional, however, the issue lies in the fact that the first line only begins with a single # symbol

jQuery event triggers upon completion of execution

Place a vertical slider adjacent to an HTML element on either the left or right side

The color of the sidebar navigation elements remains consistent

Having trouble with React npm start: 'No chokidar version found' error occurring

How can I display the top 5 data results after subscribing in Nativescript?

Creating a numeric sequence based on the date of a corresponding transaction - a step-by-step guide

Looking to start using WebDriverIO and Typescript with the WDIO wizard? Here's how to get it

How can Firebase and Ionic be used to customize the password reset template for sending verification emails and more?

Best Practices for Showing JSON Data from MongoDB in an Angular Material Table

python selenium style attribute for element

Unable to locate component property

Step-by-step guide on utilizing jQuery to fade out all elements except the one that is selected