Rxjs - DistinctUntilChanged() with keyup event

Question

I\'m using Rxjs 6 which filters an observable returned by Firebase based on (keyup) event in a form field.

I have an issue when the user keeps pressing backspace while t

Answer 1

The problem is that ALLWAYS make getData. You first look at changes, then switchmap to get Data. So you must have a Observable of changes. Use a "FormControl", not an input with [(ngModel)] So, in your .html

<input type="text" [formControl]="search">

The code must be

  search= new FormControl();       //Declare the formControl

  constructor() {}

  ngOnInit() {
    this.search.valueChanges.pipe(
         debounceTime(400),
         distinctUntilChanged(),
         tap((term)=>{
              //here the value has changed
              this.loadingIndicator = true;
         }),
         switchMap(filteredValue=> {
              //We not return the value changed, 
              return this.svc.getData().pipe(
                     map(_co => {
                         return _co.filter(...)
                     }),
                     tap(()=>{
                         this.loadingIndicator=false;
                     }))
          })).subscribe(result=>{
             this.result=result
          })
  }