### File

`src/lib/table-column-filter/table-column-filter-input.directive.ts`

### Implements

`AfterViewInit` `OnDestroy`

### Metadata

Selector | `input[ngModel][rxapTableColumnFilterInput]`
Standalone | `true`

### Index

###### Inputs

- column

### Constructor

`constructor(ngModel: NgModel, tableColumnFilterService: TableColumnFilterService)`
Defined in src/lib/table-column-filter/table-column-filter-input.directive.ts:27

Parameters :

Name | Type | Optional
ngModel | `NgModel` | No
tableColumnFilterService | `TableColumnFilterService` | No

### Inputs

column
Type : `string`
Required : true
Defined in src/lib/table-column-filter/table-column-filter-input.directive.ts:25

    import {
      AfterViewInit,
      Directive,
      Inject,
      Input,
      OnDestroy,
    } from '@angular/core';
    import { NgModel } from '@angular/forms';
    import { Subscription } from 'rxjs';
    import {
      debounceTime,
      tap,
    } from 'rxjs/operators';
    import { RXAP_TABLE_FILTER } from '../table-data-source.directive';
    import { TableColumnFilterService } from './table-column-filter.service';

    // TODO : move to rxap packages
    @Directive({
      selector: 'input[ngModel][rxapTableColumnFilterInput]',
      standalone: true,
    })
    export class TableColumnFilterInputDirective implements AfterViewInit, OnDestroy {

      @Input({required: true})
      public column!: string;

      private _subscription?: Subscription;

      constructor(
        @Inject(NgModel)
        private readonly ngModel: NgModel,
        @Inject(RXAP_TABLE_FILTER)
        private readonly tableColumnFilterService: TableColumnFilterService,
      ) {
      }

      public ngOnDestroy() {
        this._subscription?.unsubscribe();
      }

      public ngAfterViewInit() {
        if (!this.ngModel.valueChanges) {
          throw new Error('Could not access the ngModel value change');
        }
        this._subscription = this.ngModel.valueChanges.pipe(
          debounceTime(500),
          tap((value) => {
              this.tableColumnFilterService.setFilter(this.column, value);
            },
          ),
        )
        .subscribe();
      }

    }

# results matching ""

# No results matching ""