How to: Use Angular’s Dependency Injection in a Standalone Class

John Horner
February 13, 2020
4 min read
dependency injection logo

Harnessing Angular’s Dependency Injection

When creating a dynamic web application, the Angular framework does a lot of the heavy lifting for you.

One of Angular’s key functions is dependency injection, which is how we can share logic between classes.

But what if we wanted to use this powerful feature in a standalone class? Is that even possible?

Yes, it is! And it’s surprisingly easy to set up.

Let’s walk through an example and I’ll show you exactly how to do it.

A Basic Example

Let’s say that you are working on an application that features posts with timestamps.

In this application, you have a class that represents the post, which, for simplicity’s sake, we’ll call “Post.”

Since you want to centralize the logic for formatting the display of that post’s timestamp, you plan to create a function for this named “getFormattedTimestamp.”

Below is a version of this class and function that would use the Angular DatePipe.

In the class above, the DatePipe is being passed in using the constructor.

This certainly works, but it makes this class and everywhere it’s used a lot less maintainable.

What if you choose to use some other injected item later? Or, down the road, you decide to use a service other than DatePipe?

That could get messy and costly very quickly.

There’s A Better Way!

If you could get the injected resource directly from within the static class, you could eliminate the constructor parameter and make this class more self-contained.

Through the use of a global injector, this can be achieved.

What is a global injector?

A global injector is when you take the injector object by itself and store it in a global variable. This allows you to use dependency injection from any file within your Angular application, including static files like the Post class.

Below are files showing how to set up the global injector.

Now that you’ve set up the globalInjector object, you can refactor the Page class to use it as seen below.

In Conclusion

By using these techniques, you can harness the power of dependency injection throughout your entire angular application, even when dealing with static files.

This leads to a much more maintainable and extensible application structure.

This post was originally published by Chris Camac and is the second in a series of musings, how-to’s, and experiences from our Software Engineering team. We hope you’ll find it as helpful and informative as we do. Republished with permission.

To keep up with more of Chris’ work, you can follow him on Twitter @PilgrimSecret

Meet John Horner


John Horner has over 20 years of experience in the software industry. He holds a Master’s Degree from the University of Pennsylvania and has served as an adjunct professor at Drexel University and Temple University. Today, he helps customers understand the root of their business challenges and provides consultation on how to accomplish goals and create new opportunities.

Discover and Do More With Business Technology!

Get monthly business technology tips directly to your inbox.