Angular reference issue when functions are passed as input to child

I am trying to build a data-grid library by wrapping ag-grid, so that if client decides to change ag-grid to some other library we dont have to work on multiple pages on refactoring. We can just make changes in library itself and use the new library.

Hierarchy

• App Component (private service: Service)
  • Data-Grid
    • ag-grid-angular

To implement SSRM, and externalize the API request and response mapping, I designed the component like this

Design

Service


getPosts(page: any, pageSize: any) {
this.http.get(
`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${pageSize}`
);
}

app.component.ts


postsApi(params: any) {
const page = params.request.startRow / this.pageSize;
const pageSize = this.pageSize;

console.log("App",this);

this.service.getPosts(page, pageSize);
}

mapper(resposne: any) {
return {
rowData: resposne.data,
rowCount: resposne.pageInformation.totalRecord,
};
}

app.component.html


<uui-advanced-data-grid
[mode]="mode"
[header]="header"
[data]="data"
[sorting]="true"
[dragging]="true"
[pagination]="true"
[pageSize]="3"
[pageSizes]="[3, 10, 20, 50]"
[dataSource]="postsApi"
[mapper]="mapper"
></uui-advanced-data-grid>

data-grid.component.ts


@Input() dataSource!: any;
@Input() mapper!: any;

onGridRady(e: any) {
this.gridApi = e.api;
this.gridApi.setServerSideDatasource(this.getServerSideDatasource());
}

getServerSideDatasource(): IServerSideDatasource {
return {
getRows: (params: any) => {
console.log('ADG', this);
this.dataSource(params).subscribe(
(resposne: any) => {
params.success(this.mapper(resposne));
},
(error: any) => {
params.fail();
}
);
},
};
}

Issue


When data-grid component invokes subscribe on dataSource, it internally calls the service method getPosts from the this reference of datagrid component, but it should actual look up this method in App component..

How can I configure this in a way, so that when data-grid invokes the passed dataSource, it call the service from the parent component and not from data datagrid component? How can I still access this reference ofservice class used in a method which passed to child component from parent?

Continue reading...