How to use date filter in ng2-smart-table in angular?

Question

I used ng2-smart-table module in my angular project, everything working fine, but i don't know how to filer a date column based on from and to date. any one have example or link to correct solution please give. Thanks

Answer 1

The way to do it is by using 'renderComponent' on your field. You can see an example here : https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/custom-edit-view/advanced-example-custom-editor.component.ts

Here is what I did it :

1. Create a new component, here SimpleDateComponent
2. Add it to your module declarations and entryComponents arrays
3. Use it from your 'setting', used by your ng2-smart-table

1) The new component

import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-simple-date',
    template: `{{value |date: 'dd.MM.yyyy'}}`,
})
export class SimpleDateComponent {
    @Input() value: Date;
}

2) The import

import {NgModule} from '@angular/core';
import {PrestationListComponent} from './prestation-list/prestation-list.component';
import {SimpleDateComponent} from './simple-date-component/simple-date-component';

@NgModule({
    declarations: [
      PrestationListComponent, 
      SimpleDateComponent],
    entryComponents: [SimpleDateComponent]
})
export class PrestationsModule {
}

3) The settings object modified:

settings = {
        columns: {
            dueDate: {
                title: 'Deadline',
                type: 'custom',
                renderComponent: SimpleDateComponent
            }
        }
     };

Answer 2

This issue seems to be still open [1] on GitHub and a potential PR is still in pending merge requests. PRECAUTION: For this specific solution, you need to explicitly modify few files in ng2-smart-table folder under node_modules\ folder in your project and in case you happen to install the package again (npm i ng2-smart-table) then it'll override any changes you did in the ng2-smart-table folder. Take necessary measures like-- (generally node_modules\ folder are part of your .gitignore file and not commited to the repo but you can hack it by) explicitly commiting this folder or take a backup of ng2-smart-table folder before performing any package update. PS: Do remember ng2-smart-table is the only boilerplate to accomplish this task for e.g. there exists other better options too