Custom Range Filter

[shilan]

I am trying to write a customized filter component, inspired by the checkbox, input select filters that smart table already has from here:
https://github.com/akveo/ng2-smart-table/tree/master/src/ng2-smart-table/components/filter/filter-types

import { Component, NgModule, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/skip';
import {DefaultFilter} from 'ng2-smart-table/components/filter/filter-types/default-filter';
;

@Component({
  selector: 'double-input-filter',
  template: `
    <input [(ngModel)]="query"
           [ngClass]="inputClass"
           [formControl]="inputControl"
           class="form-control"
           type="text"
           placeholder="{{ column.title }}" />
    <input [(ngModel)]="query"
           [ngClass]="inputClass"
           [formControl]="inputControl"
           class="form-control"
           type="text"
           placeholder="{{ column.title }}" />
  `,
  styles: []
})

export class DoubleInputFilterComponent extends DefaultFilter implements OnInit {

  inputControl = new FormControl();

  constructor() {
    super();
  }

  ngOnInit() {
    this.inputControl.valueChanges
      .skip(1)
      .distinctUntilChanged()
      .debounceTime(this.delay)
      .subscribe((value: string) => this.setFilter());
  }

}

But this doesn't really work. I mean the code compiles but I just don't know how to refer to that in setting property of the table.
I already tried the selector name (double-input-filter), doesn't work. I don't understand how in smarttable in the settings proprety of smart table, it does refer to the filter type.
Any idea if it is possible?

[kuccilim]

You can't just add a new filter type and put into smart table settings, try using entryComponent instead.
Import DoubleInputFilterComponent to modules declarations and entryComponent, then use it in component which hold ng2-smart-table.

settings = {
    columns: {
      id: {
        title: 'ID',
      },
      name: {
        title: 'Title',
        filter: {
          type: 'list',
          component: DoubleInputFilterComponent,
        }
     }
   }
}

[shilan]

Thanks @kuccilim but the thing is this component is not know to smart table, they have this component that decides what to show as a filter template
https://github.com/akveo/ng2-smart-table/blob/master/src/ng2-smart-table/components/filter/filter.component.ts#L9

somehow i need to override this component, but i don't know how!

[kuccilim]

Sorry, I thought filter can accept custom component.
Perhaps you have to fork this project and add your desires custom filter.

[shilan]

oh yes, that's another way of doing that, which is not really convenient. I mean in smart-table angularjs version, you could do all these sort of stuff easily, but it seems this one is not really matured yet :|

[paritoshgpt1]

so were you able to get this to work @shilan ?
I am also looking for such a filter

[karanhinduja]

I am also looking for such filter, any update on the control?

[shilan]

No, I made an ugly solution! I made a filter outside table and forced the html to stand on top of the column. You know with inner html trick. Sometimes it doesn’t work and I have no idea why.

[karanhinduja]

Thanks for the update :)