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.

NOTE: Injection contexts are beyond the scope of this tutorial, but you can learn more in the dependency injection (DI) essentials guide and DI context guide.

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 PetCareDashboard {    petRosterService = inject(PetRosterService);}

  1. Inject the CarService

    In app.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.

    Initialize the display property with the following implementation:

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

  3. Update the App template

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

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

You've just injected your first service into a component - fantastic effort.