Inject an Angular Service into a Component using Providers

[00:01] When building applications, we often want to put business logic into isolated units so they can be reused across different parts of the application. In Angular, these units are called services, and they can be implemented in many different ways.

[00:15] If we take a look at this list component, we can see that it generates a list of items based on a collection called items, which is defined and initialized on the component. The browser renders that list. If we go ahead and change one of the item's names, Angular reflects that change once we save the file.

[00:33] Items is now hard-coded in the component, but usually our data can come from many different places, so it's better to have an abstraction that takes care of returning the data, no matter where it comes from. What we want is a data service.

[00:47] As mentioned earlier, a service in Angular can be implemented in many different ways. One way is to create a service using a class. Let's create a new file in source.app and call it dataservice.ts.

[01:04] We create a new class dataService and export it so it can be imported by other modules later on. The next thing we do is we create a property items, which gets the list of items we defined in our list component. Let's copy them over.

[01:25] Next, we define a method on dataService called getItems, which simply returns the items of the class. Now, what we want to do is to inject an instance of dataService into our list component so we can use it to get our items. Let's go back to our list component and import dataService.

[01:49] Next, we extend the component's constructor to ask for dependency of type data service by adding a constructor parameter with a type annotation for data service. The type annotation is where the magic happens. With this, we tell Angular's dependency injection to give us an instance of whatever it knows as data service.

[02:10] At this point, the dependency injection doesn't know what a data service is. That's why we need to create a provider for data service.

[02:18] We create a provider by adding a providers property to our component, which is an array of provider definitions. The easiest way to create a provider for our data service is to simply add the data service type to that array. Now Angular knows what data service is and how to create it when someone asks for it.

[02:37] Since we injected a dependency of data service using the private keyword, it's exposed as a property in the class. We can now call this.dataService.getItems to get hold of our items.

[02:56] When we save the file, the browser reloads. As we can see, we still get our list of items, but this time, coming from our service that we've injected into the component.