Angular Providers Hierarchy Tutorial 🎯

Welcome to this comprehensive Angular tutorial on Providers Hierarchy! This guide is designed to help both beginners and intermediate learners understand the concept of providers in Angular and their hierarchy. By the end of this tutorial, you will have a practical understanding of providers, their types, and how they are used in Angular applications. Let's get started!

Understanding Providers 📝

Providers are services in Angular that can be used across the application. They help to centralize functionality and make the code more manageable.

💡 Pro Tip: Think of providers as factories that create instances of services when needed.

Providers Types 📝

Angular offers three types of providers:

Value Providers: Provide a single instance of a service with a specific value.
Service Providers: Provide a singleton service, meaning a single instance is shared across the entire application.
Factory Providers: Generate a new instance every time the service is requested.

Value Providers 💡

Let's create a value provider for a simple service MathService.

typescript

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

@Injectable({
  providedIn: 'root',
  multi: false // Since it's a value provider, multi should be false
})
export class MathService {
  public add(a: number, b: number) {
    return a + b;
  }
}

Now you can inject MathService wherever you need it:

typescript

import { Component } from '@angular/core';
import { MathService } from './math.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ result }}</h1>
  `,
})
export class AppComponent {
  public result: number;
  constructor(private mathService: MathService) {
    this.result = this.mathService.add(5, 3);
  }
}

Service Providers 💡

Service providers provide a singleton service that shares a single instance across the entire application. Let's create a service provider for MathService.

typescript

import { Injectable, NgModule } from '@angular/core';
import { MathService } from './math.service';

@Injectable({
  providedIn: 'root',
  multi: false // Since it's a service provider, multi should be false
})
export class MathServiceProvider {
  constructor(private mathService: MathService) {
    // Do something with MathService
  }
}

@NgModule({
  providers: [MathServiceProvider] // Register the service provider
})
export class AppModule { }

Now, any component or service can inject MathService:

typescript

import { Component } from '@angular/core';
import { MathService } from './math.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ result }}</h1>
  `,
})
export class AppComponent {
  public result: number;
  constructor(private mathService: MathService) {
    this.result = this.mathService.add(5, 3);
  }
}

Factory Providers 💡

Factory providers generate a new instance of the service every time it's requested. They are useful when you need different instances of the service with different configurations.

typescript

import { Injectable, NgModule } from '@angular/core';
import { MathService } from './math.service';

@Injectable({
  providedIn: 'root',
  multi: true // Since it's a factory provider, multi should be true
})
export class MathServiceFactory {
  constructor(private mathService: MathService) { }

  createMathService() {
    // Modify MathService as needed and return the new instance
    return new MathService();
  }
}

@NgModule({
  providers: [MathServiceFactory] // Register the factory provider
})
export class AppModule { }

Now, whenever you need a new instance of MathService, you can inject and use MathServiceFactory:

typescript

import { Component, Inject } from '@angular/core';
import { MathServiceFactory } from './math-service.factory';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ result }}</h1>
  `,
})
export class AppComponent {
  public result: number;

  constructor(private mathServiceFactory: MathServiceFactory, @Inject('customConfig') private config) {
    const customMathService = mathServiceFactory.createMathService(config);
    this.result = customMathService.add(5, 3);
  }
}

Quiz 🎯

Congratulations on completing this lesson on Providers Hierarchy in Angular! You now have a solid understanding of providers, their types, and how to use them in your Angular applications. Keep exploring and learning with CodeYourCraft! 🎉