CODEWITHSUNDEEP
javascriptangulartypescript
Raka Pratama
Raka Pratama

Reputation: 125

How to make reusable function which affect different data in angular?

First of all, I am so sorry if the title is not represented the problem I am about tell. Here, I have a lot of component which has an object that quite do the same thing. I'll give two example:

First component, PlanningComponent:

export class PlanningComponent implements OnInit {

  constructor() {}

  data = {
     items: null,
     isEmpty: null as boolean,
     getData: () => {
        /* fetching data from database and store it in items properties */
     },
     /* another method related to data goes here */
  };
  pagination = {
     totalData: null as number, /* this prop gets its value within getData process */
     currentPage: null as number, /* this prop already has a value within OnInit process */
     goNext: () => {
        this.pagination.currentPage += 1; 
        this.data.getData();
     },
     goLast: () => {
        this.pagination.currentPage = this.totalData;
        this.data.getData();
     },
     /* another method related to pagination goes here */
  };
  filter = {
    filterA: null as string,
    filterB: null as number,
    filterC: null as string,
    isEnabled: null as boolean,
    isToggled: null as boolean,
    onReset: () => {
      this.filter.filterA = null;
      this.filter.filterB = null;
      this.filter.filterC = null;
      this.data.getData();
    },
    /* another function related to filter goes here */
  };
}

Second component, HarvestComponent:

export class HarvestComponent implements OnInit {

  constructor() {}

  data = {
     items: null,
     isEmpty: null as boolean,
     getData: () => {
        /* fetching data from database and store it in items properties */
     },
     /* another method related to data goes here */
  };
  pagination = {
     totalData: null as number, /* this prop gets its value within getData process */
     currentPage: null as number, /* this prop already has a value within OnInit process */
     goNext: () => {
        this.pagination.currentPage += 1; 
        this.data.getData();
     },
     goLast: () => {
        this.pagination.currentPage = this.totalData;
        this.data.getData();
     },
     /* another method related to pagination goes here */
  };
  filter = {
    filterX: null as string,
    filterY: null as number,
    filterZ: null as string,
    isEnabled: null as boolean,
    isToggled: null as boolean,
    onReset: () => {
      this.filter.filterX = null;
      this.filter.filterY = null;
      this.filter.filterZ = null;
      this.data.getData();
    },
    /* another function related to filter goes here */
  };
}

Here as you can see, the two component is looks quite the same. The difference lies on the value of data.items, the filter properties, and the affected data when calling the function (for example pagination.goNext()). In the first component is calling the getData() of planning, and the second one is calling the getData() of harvest. Yeah you got the point.

I don't want to write the same code again and again, the apps I am about to develope has a lot of pages but has a similar behaviour. Is there any good approach to make the code reusable in my case?

I have tried to think about create different component for pagination and filter, but I still don't get a clear picture how to make the component affecting the different data (data.items() in planning, data.items() in harvest)

So far, I just create a helper function. For example for filter component I created a function in helper to make props within filter become null. But still, i write the same thing in every component, it just cut a line or two. Is there any hint for me?

Upvotes: 0

Views: 118

Answers (1)

Roberc
Roberc

Reputation: 1956

As people suggested, you may use pipes. But I think you have forgotten the main benefit of OOP (which can't be used in Javascript, but is implemented in Typescript). And it's class inheritance! :)

Remember the basics:

class base {
    variable1;
    constructor() {
       this.variable1 = 1;
    }
}
class child extends base {
    variable2;
    constructor() {
        super();
        console.log(this.variable1);
    }
}

And the same is for class members as methods and properties. Thanks to Typescript, it is possible now.

Upvotes: 1

Related Questions