Injection token - lordoftheflies/angular-essential-training GitHub Wiki

So the inject decorator, with its string literal works. But there's a better way to do this. Relying on string literals for tokens, is always a bit of a risk. They are harder to maintain, easier to mistype, and code editors don't have much opportunity to keep track of them, to aid in refactoring. Angular has a solution for this. It's called an injection token. You can use an injection token, to tell angular you want to have a concrete type that can be passed around. Let's refactor little lookup lists value type, to use an injection token. First, let's create a new file called providers.Ts in the app folder. And we'll move the lookup list value instantiation, from the app module Ts file, into this new file. The provider metadata property in the app module, is going to need this lookup list variable. So that's have the export keyword in front of the const statement, so that we can import it in the app module file. Okay, to create an injection token, we need to import the class type. It is part of the angular core scope to package. So that's add the import statement for that. Then we want to create a new variable to hold the injection token, and we want to export that. So we write export const look up list token, equals a call to new injection token. Now ,the variable name can be whatever you want, but the injection token constructor, expects a string literal. The value that will end up being used as part of the underlying token value. So we set that to the string literal lookup list token. This can be whatever you want as well, but you'll want to use a unique name for each injection token you create in your application. Now we can switch back to the app.module.Ts file, and add an import statement to bring in the lookup list, token, token and the lookup list object. And then refactor the provide object to use lookup list token, instead of the string literal. And now we can go over to the media-item-form.component.Ts file, and add an import statement to bring in the lookup list token. And then refactor the inject decorator in the constructor, to use the token instead of the string literal. Through the use of angulars injection token, we have eliminated the string literal token usage, and have a better solution for working with value type injection in our constructors.