Angular Dependency Injection

Angular is an open-source framework for building web modern web applications. One of the key principles of Angular is dependency injection. Dependency Injection is one of the widely used techniques in application programming. It is included in almost every framework. In this article, we will learn about Dependency Injection and how to perform Dependency Injection in Angular.

Prerequisites

• NodeJS NPM
• Angular CLI

What is Dependency Injection ?

Dependency Injection is a design pattern in which components or services are provided with their dependencies instead of creating or locating them internally. In Angular, the Dependency Injection system manages the dependencies between various parts of an application, providing loose coupling and modular development.

Key Concepts of Dependency Injection in Angular

1. Providers:
   • Providers are responsible for registering dependencies with the Angular Dependency Injection system.
   • They define how instances of services or values are created and made available throughout the application.
   • Providers are typically registered at the module level using the providers array in the module metadata or at the component level using the providers property in the component metadata.
2. Injection Tokens:
   • Injection tokens serve as keys for looking up dependencies in Angular's Dependency Injection system.
   • They are typically classes or values that act as unique identifiers for specific dependencies.
   • Angular provides built-in injection tokens for commonly used services like HttpClient, RouterModule, etc.
3. Injection Mechanism:
   • Components, services, or other Angular constructs declare dependencies in their constructors by specifying the corresponding injection tokens as parameters.
   • When Angular creates an instance of a component or service, it resolves the dependencies by looking up the providers registered in the current injector hierarchy.
   • Angular automatically injects the appropriate dependencies into the constructor parameters based on the injection tokens.
4. Hierarchical Nature:
   • Angular's Dependency Injection system is hierarchical, meaning that each component has its own injector that can access dependencies provided by its parent component or any ancestor component.
   • This hierarchical nature allows dependencies to be scoped at different levels of the application, promoting encapsulation and reusability.

Steps to Create Angular Application And Installing Module:

Step 1: Create a Angular application using the following command:

ng new my-App

Step 2: Go to your project directory

cd my-App

Step 3: Create a service using the following command.

ng generate service my-service

We have now completed setting up the angular environment and created a service.

Project Structure:

Dependencies:

"dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },

Below is the example of performing dependency injection in Angular

<!-- app.component.html -->

<button (click)="user()">Get Users</button>
<div *ngIf