Angular 2: Importing shared functions

Question

I find myself reusing generic functions and I'd much rather have them in one place and simply import them into my various components. Is that something I can do easily in Angular 2?

For example:

handleResponse(message) {
    let toast = this.toastCtrl.create({
        message: message,
        duration: 3000,
        position: 'top'
    });
    toast.present();
}

Where would I put it in order to be able to import this function and call it?

Usually I create a shared component and put shared functions in this class, so I can easily use in other components extending the shared component or even injecting the shared component in another component. — developer033
– developer033, Commented May 9, 2017 at 20:41

joh04667 · Accepted Answer · 2017-05-09 21:11:36Z

1

You can use a class to do this. The best way to do this is to create a class with static members so that you can access its properties without constructing the class. This is usually done in its own file.

Example:

export class Utils {

  public static handleResponse(): returnType {...}

  public static doAThing(): anotherType {...}

}

...and then import your Utils class as normal, then call its methods statically:

import { Utils } from 'path/to/utils';

...

let banana = Utils.handleResponse(thing);

Note that static members should be public (and need to be declared even though undeclared members are public by default).

answered May 9, 2017 at 21:11

joh04667

7,48730 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jeremy Thomas Over a year ago

will this work if I need to import something like ViewController into the utility class? If yes, how can I declare it without using constructor(){}

joh04667 Over a year ago

If something needs to be injected by Angular, it needs to be in the constructor, unfortunately. This is the basis for how dependency injection / tokens work in the Angular compiler. Might I suggest adding the utility methods to the service itself? If multiple services need the methods, you could write a base class with the methods and have those services extend that base class (using extends and with no static methods)

Collectives™ on Stack Overflow

Angular 2: Importing shared functions

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related