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

Esta es la solución más válida que te podemos brindar, sin embargo mírala pausadamente y analiza si se adapta a tu proyecto.

Solución:

La forma más fácil y limpia que se me ocurre es implementar 2 clases 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 afectar a ambos sucesivamente al elemento. Espero que ayude

Aquí está mi solución.

Quería resaltar los datos en el formulario que otros usuarios modifican en tiempo real.

En mi formulario HTML, reemplacé elementos html nativos por componentes Angular. Para cada tipo de elemento nativo, creé un nuevo componente angular con soporte para resaltado. Cada componente implementa el AccesorValorControl Interfaz angular.

En el formulario principal, reemplacé el elemento nativo:

por mi elemento personalizado:

Cuando Angular llama detectar cambios () para el formulario principal, verifica todos los datos que los componentes del formulario utilizan como entradas.

Si un componente es un ControlValueAccessor y se produjo un cambio en el modelo de la aplicación, llama al método AccesorValorControl.escribirValor( valor ). Es el método que se llama cuando los datos cambian en la memoria. Lo uso como un gancho para actualizar temporalmente el estilo para agregar el toque de luz.

Aquí está el elemento personalizado. Usé animaciones angulares para actualizar el color del borde y volver al color original.

import  Component, Input, forwardRef, ChangeDetectorRef  from '@angular/core';
import  ControlValueAccessor,  NG_VALUE_ACCESSOR   from '@angular/forms';
import  trigger, state, style, animate, transition, keyframes  from '@angular/animations';

@Component(

  selector: 'reactive-input',
  template: ``,
  styles: [`.cellinput   padding: 4px `],
  animations: [
    trigger( 
      'updatingTrigger', [
        transition('* => otherWriting', animate(1000, keyframes([
          style ( 'border-color' : 'var( --change-detect-color )', offset: 0 ),
          style ( 'border-color' : 'var( --main-color )', offset: 1 )
        ])))
    ])
  ],
  providers: [  provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ReactiveInputComponent), multi: true  ]
)
export class ReactiveInputComponent implements ControlValueAccessor 

  public updatingState : string = null;
  _value = '';

  // stores the action in the attribute (onModelChange) in the html template:
  propagateChange:any = ( change ) => ;

  constructor( private ref: ChangeDetectorRef )  

  // change from the model
  writeValue(value: any): void
  
    this._value = value; 
    this.updatingState = 'otherWriting';

    window.setTimeout( () => 
      this.updatingState = null;
    , 100 );

    // model value has change so changes must be detected (case ChangeDetectorStrategy is OnPush)
    this.ref.detectChanges();
  

  // change from the UI
  set value(event: any)
  
    this._value = event;
    this.propagateChange(event);
    this.updatingState = null;
  

  get value()
  
    return this._value;
  

  registerOnChange(fn: any): void  this.propagateChange = fn; 
  registerOnTouched(fn: () => void): void 
  setDisabledState?(isDisabled: boolean): void ;

Tienes la opción de añadir valor a nuestra información añadiendo tu veteranía en las críticas.

---

---

Utiliza Nuestro Buscador