Dependency Injection In Angular

What is Dependency Injection ? 

Dependency Injection is an important application design pattern in which a class ask for dependencies from external sources , rather than creating them itself.

Angular comes with it’s own dependency injection framework for resolving dependencies. so you can have your services , depend on other services throughout your application .

Dependency injection, a well-known programming concept, is what separates a class from its dependencies. Through the use of dependency injection, dependent objects may be created independently of classes and provided to classes in a variety of other ways.

Consider two classes, A and B. Assume class A makes use of class B’s objects. A class B instance is often generated in OOPS so that class A may access the objects. We may create and bind dependant objects outside of the class that depends on them by using DI.

There are typically three different kinds of classes:

Client Class – The dependant class on the service class is this one.
Service Class – class that offers the client class the service.
Injector Class – injects the object from the service class into the client class.

Types of Dependency Injection in Angular : 

1. Constructor injection: It provides the dependencies through a class constructor.
2. Setter injection: The injector injects the dependence into a setter method that is used by the client.
3. Interface injection: The dependency offers an injector function that will inject the dependence into any client that is supplied to it. On the other hand, the clients must implement an interface that offers a setter method that takes the dependence.

Advantages of Dependency Injection : 

The benefits of dependency injection are astounding. Here are a few of them.

1. Dependency Injection helps in Unit testing.
2. As the injector component handles dependency initialization, boilerplate code is minimised.
3. It becomes easier to extend the application.
4. Loose coupling, a crucial component of application development, is made possible with its assistance.

Disadvantages of Dependency Injection : 

1. The code’s lack of flexibility is the first disadvantage.
2. The inability to test this code is the second problem.

Demo: Injecting Services into Components to Display a List 

app.component.html

<div class="container">
  <h1 class="heading">Demo</h1>

  <button type="button" (click)="getProducts()">Get Products</button>

  <div class="table-responsive mt-4">
    <table class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let product of products;">
          <td>{{product.productID}}</td>
          <td>{{product.name}}</td>
          <td>{{product.price}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

app.component.ts :

import { Component } from "@angular/core";
import { ProductService } from "./product.service";
import { Product } from "./product";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html"
})
export class AppComponent {
  products: Product[];
  productService;

  constructor() {
    this.productService = new ProductService();
  }

  getProducts() {
    this.products = this.productService.getProducts();
  }
}

Create service:

ng g service product

product.service.ts

import { Product } from "./product";

export class ProductService {
  public getProducts() {
    let products: Product[];

    products = [
      new Product(1, "Memory Card", 500),
      new Product(1, "Pen Drive", 750),
      new Product(1, "Power Bank", 100)
    ];

    return products;
  }
}

product.ts :

export class Product {
  constructor(productID: number, name: string, price: number) {
    this.productID = productID;
    this.name = name;
    this.price = price;
  }

  productID: number;
  name: string;
  price: number;
}

Output :