How to use hierarchical dependency injection to provide different service instances

Question

Can i know How to use hierarchical dependency injection to provide different service instances?

Answer 1

To use hierarchical dependency injection in Angular and provide different instances of a service:

How It Works:

Angular creates new instances of a service if you provide it at a lower level (like component), overriding higher-level (e.g., root) instances.

Example:

Default service (singleton):

@Injectable({ providedIn: 'root' })

export class LoggerService {

  log(msg: string) {

    console.log(msg);

  }

}

Override in a specific component:

@Component({

  selector: 'app-child',

  templateUrl: './child.component.html',

  providers: [LoggerService] // New instance here

})

export class ChildComponent {

  constructor(private logger: LoggerService) {

    this.logger.log('Child logger instance');

  }

}