Inject-based dependency injection

Creating an injectable service is the first part of the dependency injection (DI) system in Angular. How do you inject a service into a component? Angular has a convenient function called inject() that can be used in the proper context.

In this activity, you'll learn how to inject a service and use it in a component.

It is often helpful to initialize class properties with values provided by the DI system. Here's an example:

      
@Component({...})
class PetCareDashboardComponent {
    petRosterService = inject(PetRosterService);
}
    

1. Inject the CarService

   In app.component.ts, using the inject() function inject the CarService and assign it to a property called carService

   Note: Notice the difference between the property carService and the class CarService.

2. Use the carService instance

   Calling inject(CarService) gave you an instance of the CarService that you can use in your application, stored in the carService property.

   In the constructor function of the AppComponent, add the following implementation:

         
   constructor() {
       this.display = this.carService.getCars().join(' ⭐️ ');
   }
       

3. Update the AppComponent template

   Update the component template in app.component.ts with the following code:

         
   template: `<p>Car Listing: {{ display }}</p>`,
       

You've just injected your first service into a component - fantastic effort. Before you finish this section on DI, you'll learn an alternative syntax to inject resources into your components.