# angular service for centralizing common grid functions

I have an angular 7 app that is data focused and as a result has dozens of grids. These grids are from the Kendo UI for ANgular component library made by Telerik. These grid components expose hooks for the sort, filter, group functions of the grid. 90% of the grids I have are a very simple CRUD grid with next to no validation or business logic involved.

As a result, I have to write the following code (Typescript) over and over for each grid:

 public initData(): void {
this.gridData = process(this.data, this.gridState);
}

public onStateChange(state: DataStateChangeEvent): void {
state.group.map(group => (group.aggregates = this.aggregates));
this.gridState = state;
this.gridData = process(this.data, this.gridState);
}

public groupChange(grp: GroupDescriptor[]): void {
this.groups = grp;
this.gridData = process(this.data, this.gridState);
}

public sortChange(srt: SortDescriptor[]): void {
this.sort = srt;
this.gridData = process(this.data, this.gridState);
}

public filterChange(fltr: CompositeFilterDescriptor): void {
this.filter = fltr;
this.gridData = process(filterBy(this.data, this.filter), {
group: this.groups,
sort: this.sort
});
}


this is obviously in the component class behind each grid.

What I am wondering is, Can I move the functions to a service so that I don't have to rewrite them for each component? Additionally, should I create them as static so that there is only one or should I instantiate a new "service" for each component?