Creating an injectable service

Dependency injection (DI) in Angular is one of the framework's most powerful features. Consider dependency injection to be the ability for Angular to provide resources you need for your application at runtime. A dependency could be a service or some other resources.

You can learn more about dependency injection in the Angular docs. For now, you will get practice creating injectable resources.

In this activity, you'll learn how to create an injectable service.

One way to use a service is to act as a way to interact with data and APIs. To make a service reusable you should keep the logic in the service and share it throughout the application when it is needed.

To make a service eligible to be injected by the DI system use the @Injectable decorator. For example:

      
@Injectable({
    providedIn: 'root'
})
class UserService {
    // methods to retrieve and return data
}
    

The @Injectable decorator notifies the DI system that the UserService is available to be requested in a class. providedIn sets the scope in which this resource is available. For now, it is good enough to understand that providedIn: 'root' means that the UserService is available to the entire application.

Alright, you try:

1. Add the @Injectable decorator

   Update the code in car.service.ts by adding the @Injectable decorator.

2. Configure the decorator

   The values in the object passed to the decorator are considered to be the configuration for the decorator.
   Update the @Injectable decorator in car.service.ts to include the configuration for providedIn: 'root'.

   Tip: Use the above example to find the correct syntax.

Well, done 👍 that service is now injectable and can participate in the fun. Now that the service is injectable, let's try injecting it into a component 👉