Ask any question about JavaScript here... and get an instant response.

What is dependency injection in Angular?

Asked on Sep 19, 2025

Answer

Dependency Injection (DI) in Angular is a design pattern used to manage how components and services are instantiated and connected. It allows for better code modularity and easier testing by injecting dependencies rather than hardcoding them.

<!-- BEGIN COPY / PASTE -->
        import { Injectable } from '@angular/core';

        @Injectable({
          providedIn: 'root',
        })
        export class DataService {
          getData() {
            return ['Data1', 'Data2', 'Data3'];
          }
        }

        import { Component } from '@angular/core';
        import { DataService } from './data.service';

        @Component({
          selector: 'app-root',
          template: `<ul><li *ngFor="let item of data">{{ item }}</li></ul>`,
        })
        export class AppComponent {
          data: string[];

          constructor(private dataService: DataService) {
            this.data = this.dataService.getData();
          }
        }
        <!-- END COPY / PASTE -->

Additional Comment:

The "DataService" is marked with "@Injectable" to make it available for DI.
The "AppComponent" uses the "DataService" by declaring it in the constructor, allowing Angular to inject the service instance.
The "providedIn: 'root'" option makes the service a singleton, available throughout the application.
Dependency Injection promotes loose coupling and enhances testability by allowing you to substitute mock services during testing.

✅ Answered with JavaScript best practices.

Ask any question about JavaScript here... and get an instant response.

What is dependency injection in Angular?

Asked on Sep 19, 2025

Answer

The Q&A Network