Filtering AG grid master detail (across main and detailed grids) angular

I am trying to mimic the working example found in the example here with the latest APIs of AG grid (latest version to date), I'm not able to figure out what is wrong and why the filter doesn't work

Here is the link to my code I'm trying and the one I referred to is Here

The differences I could see are the value updated by Input and I believe it shouldn't make much difference but this below piece of code that new API is being used to set quickFilter

Previous versions

onInputChanged(toFilterBy) {
console.log(this.gridApi, toFilterBy);
this.gridApi.setQuickFilter(toFilterBy); // this

this.gridApi.forEachDetailGridInfo((detailGridInfo) => {
detailGridInfo.api.setQuickFilter(toFilterBy); // and this
});
}


Newer version API

onInputChanged() {
const toFilterBy = (document.getElementById('filter-text') as HTMLInputElement).value;
console.log(this.gridApi, toFilterBy);
this.gridApi.setGridOption('quickFilterText', toFilterBy);

this.gridApi.forEachDetailGridInfo((detailGridInfo) => {
detailGridInfo.api.setGridOption('quickFilterText', toFilterBy);
});
}


I'm not sure what is missed or did incorrectly, any help or a guide would be appreciated. Thanks

Continue reading...