Angular 7 rxjs 6 bind to certain elements only

pengz

I am building a new web application in Angular7.

I have a data table and I want to build server-side search functionality based on search values for each column. I have an input element at the top of each column in the data table. The search filtering should be triggered each time the search value changes in any of the input boxes.

I think I need to bind the keyup event to detect the change of value. I am using rxjs fromEvent and this does work, however, it detects the keyup of ANY keyboard event, not just the events tied to the relevant input boxes. I want to avoid unnecessary events since this will call the server-side filtering each time.

HTML

<table mat-table [dataSource]="data" class="example-table" matSort>
  <!-- ItemID Column -->
  <ng-container matColumnDef="ItemID">
    <th class="header" mat-header-cell *matHeaderCellDef>
      <div mat-sort-header>ItemID</div>
      <mat-form-field class="filter" floatLabel="never">
        <input
          matInput
          placeholder="Search ItemID"
          #input
          [(ngModel)]="searchValues.ItemID"
        >
      </mat-form-field>
    </th>
    <td mat-cell *matCellDef="let row">{{row.ItemID}}</td>
  </ng-container>

  <!-- IdentificationID Column -->
  <ng-container matColumnDef="IdentificationID">
    <th class="header" mat-header-cell *matHeaderCellDef>
      <div mat-sort-header>IdentificationID</div>
      <mat-form-field class="filter" floatLabel="never">
        <input
          matInput
          placeholder="Search IdentificationID"
          #input
          [(ngModel)]="searchValues.IdentificationID"
        >
      </mat-form-field>
    </th>
    <td mat-cell *matCellDef="let row">{{row.IdentificationID}}</td>
  </ng-container>
</table>

TS component

// TODO: bind to relevant input elements only
fromEvent<KeyboardEvent>(document, 'keyup')
  .pipe(
    debounceTime(150),
    distinctUntilChanged(),
    tap(() => {

      // call search function

    })
  )
  .subscribe();
kat1330

If you want to user fromEvent you can filter all events by tag name. In your case it will be like below:

// TODO: bind to relevant input elements only
fromEvent<KeyboardEvent>(document, 'keyup')
  .pipe(
    filter(e => e.target && e.target.tagName === 'INPUT') // filters only observables from INPUT
    debounceTime(150),
    distinctUntilChanged(),
    tap(() => {

      // call search function

    })
  )
  .subscribe();

Please pay attention on filter() operator which I added.

If you don't want to use fromEvent you can use angular built in bindings to bind input's keyup event:

<input (keyup)="searchTable($event)">

I prefer second option.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

RXJS in Angular 6 returns only { "_isScalar": false }

Angular 8 http.get bind a certain property only

Angular 7 (RxJs 6.x) - How to use throwError

Rxjs angular 6/7 mergeMap delay http request

Overflow only certain elements

Convert Rxjs code to Angular 6 and latest rxjs

Angular 6 RXJS Import Syntax?

Bind different dom elements in Angular

rxjs timer in angular7

Angular 7 RXjs 6.x - How to use forkJoin (difference between `of` and `Observable.create`)

Angular 7 (RxJs6) - Unit tests - How to check if service return throwError?

How to unit test a function is called correctly after a timer has fired. Angular 7, RXJS 6

How to fix " Property 'wheelDelta' does not exist on type 'WheelEvent' " while upgrading to angular 7,rxjs6?

Angular2 Templates: How to bind keydown.arrow to whole div instead of only control elements?

rxjs 6 pipe is not working in Angular 6

rxjs 6 countdown timer subscribe angular 6

Angular 6 & RxJS 6 Breaking Changes

Data bind to Array Angular 6

Bind handler only once for all elements of a class

Using Typescript/Angular to hide HTML elements with RXJS

SCSS/CSS Using :not selector for only certain elements

Initialize only certain elements of array in dzn file

AngularJS $sce only trust certain elements

Select full tree and only certain child elements

Filter elements with a regex, only if they are in a certain block

Array Only Prints Certain Elements and Not Others

PHP for each Loop return only certain elements

AngularJS displays only elements that meet a certain condition

How to apply rules to only certain elements in array