Understand Angular Dependency Injection

Inject an Angular Service into a Component using Providers

Use Provide and UseClass in Angular Providers

Use Angular Factory Providers

Use Angular Factory Providers with dependencies

Understand Angular @Injectable

Use Angular Value Providers

Understand OpaqueToken in Angular

Angular Dependency Injection (DI) Explained

Dependecies aren’t always objects created by classes or factory functions. Sometimes, all we really want is inject a simple value, which can be a primitive, or maybe just a configuration object. For these cases, we can use value providers and in this lesson we’ll discuss, how they are created.

[00:01] Dependencies aren't always objects created by classes or factory functions. Sometimes all we really want is to inject a simple value, which can be a primitive or maybe just a configuration object. For these cases we can use value providers.

[00:15] Let's take a look at our data service. Data service has an HDP dependency and uses that to fetch items from a remote server. The API URL, where the service is fetching from, is defined up here.

[00:29] In our list component, we simply call getItems on our data service. We get an observable, which is then result at runtime using the async pipe, which in turn results in a list of items rendered in the browser.

[00:45] Coming back to our data service, we see that API URL is a hard-coded property of the class. This works great, but of course it would be way better if we could inject this API URL wherever we need it in our application.

[01:01] To make this value injectable, we first need to add a provider to our list component. Let's go back to our list component and type provides API URL. The interesting part here is that provider tokens can be either types or strings. In this case the token is a string, and we now need to define the strategy that is used to create the dependency.

[01:25] Since we really just want to inject a simple string value, we can type use value, and this gets the value we want to inject, which is our API URL.

[01:39] Now we go back to our data service and inject the API URL by its token. We go into the constructor at the parameter, and now we have a problem. Obviously we can't add a type annotation for a string API URL since this is not a valid type.

[01:56] Angular comes with a decorator that solves exactly that problem. It's called inject and we can simply import it from @Angular/core. @inject is a decorator that we can attach to the constructor parameter so we can annotate them with the required metadata. All we need to do is to prepend the parameter with the decorator and pass it the token for the provider that creates the dependency.

[02:22] Another thing to note is that @inject takes any token, not just strings. That's why we could also use @inject to add metadata for the, let's say, lock debugger dependency. This is useful if we happen to write our Angular 2 application in a language other than TypeScript, where type annotations don't exist.

[02:45] Let's remove the class property, save the file, and we can see that everything still works, but now our API URL is an injectable value.

Course

Angular Dependency Injection (DI) Explained

Use Angular Value Providers

Share this video with your friends