Write global functions to use in all components in angular

Question

Note : Its not for global variable but for a global common function to perform a functionality on all components

I am working on an angular app where I have around 400 components in different modules, almost all components have one same kind of functionality as mentioned below

There is a sections on many pages which shows a "How to work section" which can be closed by users and will remain closed unless they open it again, I have done it with cookies which I set on click on close or open icon but this function is written in a component and this needs to be imported in other components

I want to create a functions somewhere which perform this functionality on click on icon and can be called without importing any component in others.

One way to do it ( as I thought ) could be create a JavaScript function in a file and load it in index file and then call this function on click on close and open icon

Not sure if this is the best way to do this. Hope someone will come up with a better solution.

Solution 1

You can export a function that is a written in .ts file and then call it in all your components.

   export function myFunction(){
        // Do something
   }

And then import the function myFunction() in other components. That works fine for me and can be useful in certain cases

Solution 2

1. create your global function service, i.e. 'funcs.services.ts' under 'services' directory:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class FuncsService {
  constructor() { }
  
  myGlobalAddFunction(a){
    return a++;
  }
  mySecondFunc(){
    // add more... and so on
  }
}

2. Import the function in your component:

// your path may different 
import { FuncsService } from './../services/funcs/funcs.service';
//...
constructor(
   private funcs: FuncsService
) {}
ngOnInit(): void {
   let x = 1;
   myResult = this.funcs.myGlobalAddFunction(x);
   // Then you are expecting 2 for return value
}

3. Hope that works... :)

Solution 3

The most recommended way is to use a service and inject it whenever needed, but there is a way to have a function available globally.

Although I don't think it's a really good idea, you can add the function in the index.html file, then whenever you want to use it, you have to use @ts-ignore to avoid an error from being thrown. e.g

index.html

<script>
  function globalFunc(){
    alert(2)
  }
</script>

anywhere else on the app

// @ts-ignore
globalFunc();

1. List item