0

quería hacer mi primer aporte, estoy trabajando con Ionic 4. En este caso quiero mostrar como detectar cuando dejamos de escribir en un input y así ejecutar una fracción de código cuando pasa un determinado tiempo.

filterItems(ev) 
  {    
    this.spin = true;  // Variable boolean para mostrar ion-spinner
    this.timeLeft = 1; // Variable number del temporizador, se renueva cada vez que se ejectuta el metodo (al teclear sobre el campo)
    if(!this.flag)
    {
      this.flag = true;  // variable boolean para generar un solo intervalo
      this.interval = setInterval(() => {
        if(this.timeLeft > 0) 
        {
          this.timeLeft--;
        } 
        else 
        {
          clearInterval(this.interval);
          this.spin = false;      
          this.flag = false; 

          console.log('Metodo a ejecutar ' + ev)  // Fracción de código a ejecutar
        }        
      },500)  // Tiempo en ms en que se ejecutará la fracción de código dentro el intervalo cuando dejamos de teclear
    }    
   } 
 <div class="col-12 col-md-12 col-lg-6 col-sm-12">
        <div class="input-group input-group-sm mb-1">              
          <input type="text" class="form-control col-lg-6 offset-lg-6" (keyup)="filterItems($event)"/>
          <ion-spinner name="lines-small" class="spinner" *ngIf="spin"></ion-spinner>
        </div>
      </div>

Espero les sirva de ayuda :)

3
  • Esta información la tienes que entregar en formato pregunta-respuesta. Tu pregunta sería ¿Cómo detectar cuando dejamos de escribir en un input?. Luego ingresas una respuesta a tu propia pregunta y la aceptas.
    – Candid Moe
    Commented el 18 mar. 2021 a las 14:27
  • Gracias por el comentario !, lo tendré en cuenta Commented el 18 mar. 2021 a las 14:56
  • Si no la modificas, voy a tener que cerrarla porque no es una pregunta...
    – gbianchi
    Commented el 18 mar. 2021 a las 22:44

1 respuesta 1

1

Puedes usar un observable con un formControl

<div class="col-12 col-md-12 col-lg-6 col-sm-12">
    <div class="input-group input-group-sm mb-1">              
        <input 
            type="text" 
            class="form-control col-lg-6 offset-lg-6" 
            [formControl]="search"
        />
        <ion-spinner name="lines-small" class="spinner" *ngIf="spin"></ion-spinner>
    </div>
</div>

y en tu archivo TS hacer esto

    public search: FormControl = new FormControl('');


   constructor() {
      this.search.valueChanges
        .pipe(
          tap(() => (this. spin = true)),
          debounceTime(500) // tiempo que quieres que espere
        )
        .subscribe(v => {
          this.spin = false;
          console.log(v);
       });
   }
0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.