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?

Just wondering what others think about this



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.