Best practices for reusing methods across multiple components in Angular 8

Question

Let's say I have a method that returns the percentage from two numbers:

  calculatePercentage(a, b) {
      return (((a - b) / b) * 100 * 2).toFixed(2);
  }

Currently, I have this method on component controller. How do I make it reusable across multiple components? What is the best practice?

I am thinking to use it as a service: is that the right way to do it in Angular?

score 11 · Answer 1 · answered Nov 15 '19 at 19:56

If the methods are idempotent and also do not rely on any state then I would just have a separate .ts file where you can import the functions from.

myfunctions.ts

export calculatePercentage = (a:number,b:number):string => {return (((a - b) / b) * 100 * 2).toFixed(2);}

component.ts

import {calculatePercentage} from './myfunctions';

export class MyComponent {

  someMethod() {
      this.result = calculatePercentage(this.numa, this.numb);
  }
}

score 3 · Answer 2 · answered Nov 15 '19 at 19:53

So it can be done in two ways, either you can implement that function inside the service or create utility methods.

We should create service for methods which directly affects our components, such as HTTP request, etc.

As for the above method, I would create a util file and export the method from it.

I hope this clears your question.

And for such questions, please use different platforms where you can get suggestions instead of StackOverflow which is intended to solve your programming issues.

I have this question, too. Your answer is to vague. What is the proper type of ng file. Directive? Component? Service? Enum? Etc. — Andrew Koper, Mar 29 '23 at 17:35

score 2 · Answer 3 · answered Nov 15 '19 at 19:52

You have multiple choices:

In a service as a method.
in file Utils with export function calculatePercentage(...){...} as a static function.
In a class as a static method (It is the less recommanded)

There is no "BEST" way. Each methods have its adepts

Best practices for reusing methods across multiple components in Angular 8

3 Answers3