10 Angular Dependency Injection Interview Questions and Answers

Angular Dependency Injection (DI) is a core concept in Angular that allows developers to create more modular, maintainable, and testable code. By managing the creation and lifecycle of dependencies, Angular DI simplifies the development process and enhances the efficiency of applications. Understanding how to effectively use DI can significantly improve your ability to build robust Angular applications.

This article provides a curated selection of interview questions focused on Angular Dependency Injection. Reviewing these questions will help you deepen your understanding of DI principles and prepare you to discuss this critical topic confidently in your next technical interview.

Angular Dependency Injection Interview Questions and Answers

1. Explain the difference between providedIn: 'root' and providing a service in a module’s providers array.

In Angular, Dependency Injection (DI) is a design pattern used to implement IoC (Inversion of Control) for resolving dependencies. When you create a service, you can specify how and where it should be provided using the providedIn property or by adding it to a module’s providers array.

The providedIn: 'root' syntax declares that a service should be provided in the root injector, making it a singleton available application-wide. This approach simplifies scope management and ensures the service is accessible throughout the application.

Providing a service in a module’s providers array limits its scope to that specific module. Angular creates a new instance of the service for each module that includes it in its providers array. This is useful when you want different instances of a service in various parts of your application or when you want to limit the service’s availability to a specific module.

Example:

@Injectable({
  providedIn: 'root'
})
export class MyService {
  // Service logic
}

In this example, MyService is provided in the root injector and will be a singleton available throughout the application.

Alternatively, you can provide a service in a module’s providers array:

@NgModule({
  providers: [MyService]
})
export class MyModule {
  // Module logic
}

In this case, MyService will be scoped to MyModule, and a new instance will be created for each module that includes it in its providers array.

2. Write a code snippet demonstrating the use of the @Self decorator.

The @Self decorator in Angular tells the dependency injector to look for a dependency only in the local injector, not in any ancestor injectors. This ensures a specific instance of a dependency is used within a particular component or directive.

Here is a code snippet demonstrating the use of the @Self decorator:

import { Component, Self, Optional } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-self-example',
  template: `<form #form="ngForm"></form>`
})
export class SelfExampleComponent {
  constructor(@Self() @Optional() public ngForm: NgForm) {
    if (this.ngForm) {
      console.log('NgForm is available');
    } else {
      console.log('NgForm is not available');
    }
  }
}

In this example, the @Self decorator is used to inject the NgForm directive into the SelfExampleComponent. The @Optional decorator handles the case where NgForm might not be available, ensuring the ngForm dependency is only resolved from the local injector.

3. How can you create and use an injection token? Provide a code example.

An injection token in Angular is a unique identifier that allows you to inject dependencies that are not class-based, such as configuration objects or primitive values. This is useful for providing and injecting values that do not have a class type.

To create an injection token, use the InjectionToken class from the @angular/core package. You can then provide this token in your module or component and inject it where needed.

Example:

import { InjectionToken, Injectable, Inject, NgModule, Component } from '@angular/core';

// Create an injection token
export const API_URL = new InjectionToken<string>('apiUrl');

// Provide the token in a module
@NgModule({
  providers: [
    { provide: API_URL, useValue: 'https://api.example.com' }
  ]
})
export class AppModule {}

// Inject the token in a service
@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(@Inject(API_URL) private apiUrl: string) {
    console.log('API URL:', this.apiUrl);
  }
}

// Use the service in a component
@Component({
  selector: 'app-root',
  template: '<h1>Check the console for the API URL</h1>'
})
export class AppComponent {
  constructor(private apiService: ApiService) {}
}

In this example, we create an injection token API_URL and provide it in the AppModule with a value of 'https://api.example.com'. The ApiService then injects this token using the @Inject decorator, allowing it to access the provided value.

4. What is the purpose of the @Optional decorator? Provide a use case.

The @Optional decorator in Angular indicates that a dependency is optional. When a dependency is marked as optional, Angular will inject null if the dependency is not provided. This is useful when a service or dependency might not always be available or required.

Example:

import { Component, Optional } from '@angular/core';
import { LoggerService } from './logger.service';

@Component({
  selector: 'app-optional-demo',
  template: `<p>Check the console for logger service output.</p>`
})
export class OptionalDemoComponent {
  constructor(@Optional() private loggerService: LoggerService) {
    if (this.loggerService) {
      this.loggerService.log('Logger service is available.');
    } else {
      console.log('Logger service is not available.');
    }
  }
}

In this example, the LoggerService is marked as optional. If the LoggerService is provided, it will log a message. If it is not provided, it will log a different message indicating that the service is not available.

5. Explain the difference between @Host and @SkipSelf decorators with examples.

In Angular, @Host and @SkipSelf are decorators used in dependency injection to control how dependencies are resolved in the component hierarchy.

• The @Host decorator restricts the injector to look for the dependency in the component’s own injector or its host element’s injector. It does not allow the injector to look further up the component tree.
• The @SkipSelf decorator tells the injector to skip the current component’s injector and look for the dependency in the parent injector.

Example:

import { Component, Injectable, Host, SkipSelf } from '@angular/core';

@Injectable()
class ServiceA {
  constructor() {
    console.log('ServiceA instance created');
  }
}

@Component({
  selector: 'child-component',
  template: '<p>Child Component</p>',
  providers: [ServiceA]
})
class ChildComponent {
  constructor(@Host() private serviceA: ServiceA) {
    console.log('ChildComponent with @Host');
  }
}

@Component({
  selector: 'parent-component',
  template: '<child-component></child-component>',
  providers: [ServiceA]
})
class ParentComponent {
  constructor(@SkipSelf() private serviceA: ServiceA) {
    console.log('ParentComponent with @SkipSelf');
  }
}

In this example:

• The ChildComponent uses the @Host decorator to ensure that ServiceA is provided by its own injector or its host element’s injector.
• The ParentComponent uses the @SkipSelf decorator to skip its own injector and look for ServiceA in the parent injector.

6. Write a code example to demonstrate multi-provider tokens.

In Angular, multi-provider tokens are used to associate multiple providers with a single token. This is useful when you want to inject a collection of services. To achieve this, use the multi: true option in the provider configuration.

Here is an example to demonstrate multi-provider tokens:

import { Injectable, InjectionToken, Inject } from '@angular/core';

// Define an interface for the service
export interface Logger {
  log: (message: string) => void;
}

// Create a token for the multi-provider
export const LOGGER_TOKEN = new InjectionToken<Logger[]>('LOGGER_TOKEN');

// First logger service
@Injectable()
export class ConsoleLoggerService implements Logger {
  log(message: string) {
    console.log('ConsoleLogger:', message);
  }
}

// Second logger service
@Injectable()
export class FileLoggerService implements Logger {
  log(message: string) {
    // Imagine this logs to a file
    console.log('FileLogger:', message);
  }
}

// Component that injects the multi-provider token
@Component({
  selector: 'app-root',
  template: `<h1>Check the console for logs</h1>`,
  providers: [
    { provide: LOGGER_TOKEN, useClass: ConsoleLoggerService, multi: true },
    { provide: LOGGER_TOKEN, useClass: FileLoggerService, multi: true }
  ]
})
export class AppComponent {
  constructor(@Inject(LOGGER_TOKEN) private loggers: Logger[]) {
    this.loggers.forEach(logger => logger.log('Hello, world!'));
  }
}

In this example, we define an InjectionToken named LOGGER_TOKEN and associate it with two different services: ConsoleLoggerService and FileLoggerService. By setting multi: true, we allow multiple providers to be associated with the same token. When the AppComponent is instantiated, it injects all the services associated with LOGGER_TOKEN and calls their log method.

7. Describe how you can use factory providers. Provide a code example.

Factory providers in Angular allow you to create a service instance using a factory function. This is useful when the service requires complex initialization logic or depends on runtime values. The factory function can take dependencies as arguments, which are then injected by Angular’s dependency injection system.

Example:

import { Injectable, InjectionToken, FactoryProvider } from '@angular/core';

export const API_URL = new InjectionToken<string>('API_URL');

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private apiUrl: string) {}

  getData() {
    console.log(`Fetching data from ${this.apiUrl}`);
  }
}

export function apiServiceFactory(apiUrl: string) {
  return new ApiService(apiUrl);
}

const apiServiceProvider: FactoryProvider = {
  provide: ApiService,
  useFactory: apiServiceFactory,
  deps: [API_URL]
};

// In your module
@NgModule({
  providers: [
    { provide: API_URL, useValue: 'https://api.example.com' },
    apiServiceProvider
  ]
})
export class AppModule {}

In this example, ApiService is created using a factory function apiServiceFactory, which takes API_URL as a dependency. The API_URL is provided using the InjectionToken.

8. What is the purpose of the @Inject decorator? Provide a use case.

The @Inject decorator in Angular is used to explicitly specify the dependency to be injected into a class constructor. This is useful when the type of the dependency is not clear or when you need to inject a value that is not a class, such as a string or a configuration object.

For example, consider a scenario where you need to inject a configuration object into a service. You can use the @Inject decorator to achieve this:

import { Injectable, Inject } from '@angular/core';

const CONFIG = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
};

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(@Inject('CONFIG') private config: any) {}

  getApiUrl() {
    return this.config.apiUrl;
  }
}

In this example, the @Inject('CONFIG') decorator is used to inject the CONFIG object into the ApiService class. This allows the ApiService to access the configuration values.

9. Describe how to create a singleton service.

In Angular, a singleton service is a service that is instantiated only once during the lifetime of the application. This is achieved by providing the service at the root level, which ensures that the same instance of the service is available throughout the application.

To create a singleton service, you can use the @Injectable decorator with the providedIn property set to 'root'. This tells Angular to provide the service at the root level, making it a singleton.

Example:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SingletonService {
  constructor() { }
  
  // Service methods and properties
}

By setting providedIn: 'root', Angular’s dependency injection system ensures that only one instance of SingletonService is created and shared across the entire application.

10. How can you limit the scope of a service to a specific module or component?

In Angular, Dependency Injection (DI) is a design pattern used to implement IoC (Inversion of Control) for resolving dependencies. By default, services in Angular are singleton and shared across the entire application. However, there are scenarios where you might want to limit the scope of a service to a specific module or component.

To limit the scope of a service to a specific module, you can provide the service in the module’s providers array. This ensures that the service is only available within that module and its components.

Example:

@NgModule({
  providers: [MyService]
})
export class MyModule { }

To limit the scope of a service to a specific component, you can provide the service in the component’s providers array. This ensures that the service is only available within that component and its child components.

Example:

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  providers: [MyService]
})
export class MyComponent { }