Write global functions to use in all components in angular

user_2647198 0
Viewed 29442

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.

angular components function javascript
5 Answers

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... :)

user_95247750

This isn't the best solution (in my opinion). The best solution would be to either create a service, or an utils class.

But if you want to do this, I suggest you make a JS file, that you declare in your angular-cli.json file under the scripts property, containing your functions.

EDIT Now that you've came back to reason, here is a code sample to make utils classes. 

export const IMG_UTILS = {
  convertPngToJpg = (picture: any) => {
    // Your logic here
  }
};

export const VIEW_MANAGER = {
  isAdblockActive = () => {
    // test if an ad-blocker is active
  }
};

You can make any utils class you want in a const, then put it into a file. Then, you can put this file in an utils folder, and request it with

import { VIEW_MANAGER } from 'src/app/utils/view-manager';

Otherwise, you can make a service, which is handled by Angular, with a console command such as 

ng g s services/view-manager/view-manager

And it will behave the exact same way : you will import it in your components to use it.

Hope this helps !

Admin1

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

user_68548120

Just to chime in with possibly a duplicate answer albeit more fleshed out... I have a utilities class which I use.

For example:

export class Utilities {
    // Simple promise wrapper for setTimeout. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises#creating_a_promise_around_an_old_callback_api
    public static Wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
}

The class is referenced in a component via the import statement:

import { Utilities } from 'path/to/Utilities';

And then you can call your static methods thus:

Utilities.Wait(30000)
    .then(() => DoStuff())
    .catch(() => console.log('Darn!'));

I would tend to use RxJs but I've written it this way to keep things a little cleaner.

Dan_Atkinson_315320

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
user_90315160
Related