Using custom filter gives this error "this.customComponent.instance.ngOnChanges is not a function.".

Although my app is running fine but it is showing error.

ERROR TypeError: this.customComponent.instance.ngOnChanges is not a function FilterComponent.html:3 at CustomFilterComponent.ngOnChanges (ng2-smart-table.js:1299) at checkAndUpdateDirectiveInline (core.js:31906) at checkAndUpdateNodeInline (core.js:44367) at checkAndUpdateNode (core.js:44306) at debugCheckAndUpdateNode (core.js:45328) at debugCheckDirectivesFn (core.js:45271) at Object.eval [as updateDirectives] (FilterComponent.html:3) at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259) at checkAndUpdateView (core.js:44271) at callViewAction (core.js:44637)

This is my Custom Button that i am rendering in place of the filter

@Component({ template: <button class="btn btn-md btn-default" style="background-color: #d6d2d2" (click)="onClick('disbursement')">Select Range</button> , })

export class RangeFilterComponent extends DefaultFilter implements OnInit { inputControl = new FormControl(); constructor(private dialogService: NbDialogService) { super(); }

ngOnInit() { }

onClick=(event)=>{ this.dialogService.open(ShowcaseDialogComponent, { context: { title: ‘Select Range’, button: ‘disbursement’ }, }); } }

This is the settings of the table

projectsTableSettings = { hideHeader: false, hideSubHeader: false, add: { addButtonContent: ‘’, createButtonContent: ‘’, cancelButtonContent: ‘’, confirmCreate: true, }, edit: { editButtonContent: ‘’, saveButtonContent: ‘’, cancelButtonContent: ‘’, }, delete: { deleteButtonContent: ‘’, confirmDelete: true, }, actions: { add: false, edit: false, delete: false, }, columns: { name: { title: ‘Project Name’, type: ‘string’, }, description: { title: ‘Description’, type: ‘string’, width: “20%” }, type: { title: ‘Project Type’, type: ‘string’, }, scheme: { title: ‘Scheme’, type: ‘string’, }, assigned_to: { title: ‘Engineer’, type: ‘string’, }, assigned_contractor: { title: ‘Contractor’, type: ‘string’, }, cost_disbursement: { title: ‘Cost Disbursement’, filter: { type: ‘custom’, component: RangeFilterComponent }, width: “10%” }, physical_progress: { title: ‘Physical Progress’, filter: { type: ‘custom’, component: RangeFilterProgressComponent }, width: “10%” }, }, };

Sorry for the bad format. I tried but could not make it right.

[luischueneuien]

Well @PragyanD33p, I don’t know if editing node modules files its a good idea, maybe adding ngOnChanges(changes: SimpleChanges) { if (changes.query) { this.query = changes.query.currentValue; this.inputControl.setValue(this.query); } } to your custom component works

[PragyanD33p]

Thanks @luischueneuien. Its working. I think its better to keep the node modules untouched. I will close it then.