● This page will walk through Angular dependency injection example.

Dependency injection (DI)

is a design pattern where objects are passed to another object to complete the tasks. In
angular a service or component may require other dependent services to complete a task.
Angular uses dependency injection design pattern to fulfill these dependencies. The advantage
of dependency injection design pattern is to divide the task among deferent services. The
client service will not create the dependent object itself rather it will be created and injected
by an Angular injector. The responsibility of Angular injector is creating service instances and
injecting them into classes like components and services. Angular creates root injector during
bootstrap process and then creates other injectors. Angular injectors do not know
automatically how to create service instances, so we need to specify providers for every
service otherwise service instance will not be injected. Injector creates singleton object of a
service and hence same object is injected in components and services.
● In Angular we specify providers for services using @Injectable(), @NgModule() and @Component()
decorators. Dependency injection in the Angular components and services can be achieved
using constructor or Injector. Now find the complete example of Angular dependency injection
step by step.

● 2. Specify Providers for Services

● As we know that we need to specify providers for services so that Angular injectors
can create those service instances. We can specify providers using @Injectable(),
@NgModule() and @Component() decorators.
● @Injectable(): It has providedIn metadata to specify providers for services introduced
in Angular 6 version.
● @NgModule(): It has providers metadata to specify providers for services.
● @Component(): It has providers metadata to specify providers for services.
●
● Providers use following properties for dependency injection.
● useClass: A class provider that creates and returns new instance of specified class.
● useExisting: An alias provider that maps one token to another.
● useFactory: Configures a factory provider that returns object for dependency
injection.
● useValue: A value provider that returns a fixed value for dependency injection.
●
● Injector creates singleton object of the class configured by provider for DI. But If we
have configured a service in more than one places using provider then object
created by injector will be different. Suppose we have two components and they
have their respective children components. Suppose both components configure
same service class. Now for first component, injector will create a singleton object
that will be available for first components and its children components up to the
bottom component. For second component, injector will create a different singleton
object that will be available for second component and its children components up to
the bottom component for DI.
● Now we will discuss by code how to use @Injectable(), @NgModule() and @Component()
decorators to specify providers for services.

● 2.1. Using @Injectable() Providers

● @Injectable() decorator identifies the class or service that is applicable for dependency
injection by Angular injectors. @Injectable() can also specify providers for the service at
which it is decorated. @Injectable() has providedIn properties using which we can specify
provider for that service. Find the code snippet.
● import { Injectable } from '@angular/core';
●
● @Injectable({
● providedIn: 'root'
● })
● export class BookService {
● ------

● }
● Configuring providedIn: 'root' means that above service instance will be created by root
injector by using service constructor. If there are parameters in constructor, that
will be provided by the injector. The service configured with providedIn: 'root' will be
available for dependency injection for all components and services in the
application. @Injectable() decorator can also configure providers using useClass, useExisting,
useValueand useFactory properties. Find some examples.
●
● useExisting Example:
● import { Injectable } from '@angular/core';
● import { Computer } from './computer';
● import { LaptopService } from './laptop.service';
●
● @Injectable({
● providedIn: 'root',
● useExisting: LaptopService
● })
● export class DesktopService implements Computer {
● ------

● }
●
● useFactory Example:
● import { Injectable } from '@angular/core';
● import { BookService } from './book.service'
●
● @Injectable({
● providedIn: 'root',
● useFactory: (bookService: BookService) =>
● new PreferredBookService(bookService),
● deps: [ BookService ]
● })
● export class PreferredBookService {
● constructor(private bookService: BookService) {}
● ------

● }

● 2.2. Using @NgModule() Providers

●