detect input changes in angular-CodePudding

I have a search input and I only want to trigger the this.searchProperties.emit if the user touch or made an input to the input field I don't wanna trigger it after view init. I only want to emit if the user touches or made an input on the input field.

Currently, the issue is it calls the emit after the view is initialized. Thanks for any ideas or help.

html code

<mat-form-field id="property-list-filter" appearance="fill">
      <mat-label style="font-size:12px">Filter properties</mat-label>
      <input matInput #searchInput placeholder="Ex. Property ID" #input>
</mat-form-field>

ts code snippet

@ViewChild('searchInput') searchInput: ElementRef;
ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator

    fromEvent<any>(this.searchInput.nativeElement, 'keyup')
      .pipe(
        map((event) => event.target.value),
        startWith(''),
        debounceTime(500),
        distinctUntilChanged(),
        switchMap(async (search) => {
          this.searchProperties.emit(this.searchInput.nativeElement.value.trim().toLowerCase())
        })
      )
      .subscribe({ complete: noop });
}

CodePudding user response：

First of all, remove the startWith from your pipes. It triggers an emit on first initialization.

In order to track an input event, you have to listen to it with Angular event binding like this:

<input (input)="onInput()"/>

And in your ts file:

onInput(){
    ...
}

In order to listen to user input-touch, you can listen in the same way to the focus event or to other events that fit your need.

In addition, I recommend you to use the Angular's ReactiveForms API to manage the input state. You will find ther everythging you need in a smart and reactive way. Here is a link.

CodePudding user response：

I suggest you, use the ngModel and ngModelChange

<mat-form-field id="property-list-filter" appearance="fill">
  <mat-label style="font-size:12px">Filter properties</mat-label>
  <input matInput [(ngModel)]="input variable" (ngModelChange)="changeHandlerFunction()" placeholder="Ex. Property ID" #input>
</mat-form-field>

check this link