ng-conf happened just one week ago and there were many announcements about all things Angular. While this is good, sometimes these big announcements cause smaller features to remain unseen, because nobody really talks about them. That’s why we want to discuss providers using Map literals in this article, which is basically a new way of defining providers that landed just recently in the code base.
So what is it all about? Well, if you’ve read our articles on Dependency Injection in Angular, you know that an injector needs something called a provider, that knows how to create an object of a certain type, or for a specific token.
In other words, if we ask for a service dependency in one of our components like this:
We would run into an error, because even though, we import
MyService and use that type to annotate our constructor parameter, there’s nothing that tells Angular (or the injector) what to do, when someone asks for something of that type. Of course, Angular could simply automagically call
new on the given type and that’s it, but then there’s no way to replace the actual dependency with an object of a different type, or maybe even the way we want to construct a dependency (class vs. factory vs. value).
That’s why Angular has the concept of providers, which basically act as a sort of recipe that describe how an object of a certain type is created.
You might know that adding a provider as shown above is actually a shorthand syntax for developer ergonomics. The same logic can be expressed with this more verbose syntax:
This enables us to create objects of different types, or even use completely different ways of constructing objects like using a factory function, or simply injecting a value.
This is already pretty cool and powerful, because we can control what gets injected where in our application, without changing the application code itself.
Providers using Map Literals
provide() function (which we need to import first), to create a provider, we can configure our providers using simple object structures.
Here’s one of our earlier snippets, but this time we use Map literals:
Keep in mind that this is not a breaking change that has been introduced. It’s an additional syntax we can take advantage of. If you’re into saving key strokes, you might want to prefer Map literals over
Angular Master Class at Shopware
Join our upcoming public training!Get a ticket →
Get updates on new articles and trainings.
Join over 1400 other developers who get our content first.
How to prevent name collisions in Angular providers
Angular provides a mechanism to avoid name collisions in provider tokens. In this article we're going to explore how opaque...
RxJS Master Class and courseware updates
If you've been following us for a while, you're quite aware that we're always striving to provide up-to-date and high-quality...
Advanced caching with RxJS
When building web applications, performance should always be a top priority. One very efficient way to optimize the performance of...
Custom Overlays with Angular's CDK - Part 2
In this follow-up post we demonstrate how to use Angular's CDK to build a custom overlay that looks and feels...
Custom Overlays with Angular's CDK
The Angular Material CDK provides us with tools to build awesome and high-quality Angular components without adopting the Material Design...
Easy Dialogs with Angular Material
Building modals and dialogs isn't easy - if we do it ourselves. Angular Material comes with a powerful dialog service...