In Angular, dependency injection (DI) is a powerful mechanism that allows you to inject services and other dependencies into your components and directives. Angular provides several decorators to control how and where dependencies are resolved. Three important decorators are @Self, @SkipSelf, and @Hostand @Optional

1. @Self Decorator

Purpose: The @Self decorator ensures that Angular resolves the dependency from the injector of the current component or directive only. It prevents Angular from looking up the dependency in parent injectors.

Use Case: Use @Self when you want to ensure that a service is provided at the current component level and not inherited from a parent component.

Example:

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


@Component({
  selector: 'app-self-example',
  template: `<p>Self Example Component</p>`,
  providers: [LoggerService] // Providing LoggerService at the component level
})
export class SelfExampleComponent {
  constructor(@Self() private logger: LoggerService) {
    this.logger.log('SelfExampleComponent initialized');
  }
}

In this example:

• The LoggerService is provided at the component level.
• The @Self decorator ensures that the LoggerService is resolved from the current component's injector.

2. @SkipSelf Decorator

Purpose: The @SkipSelf decorator tells Angular to skip the current injector and look for the dependency in parent injectors.

Use Case: Use @SkipSelf when you want to ensure that a service is resolved from a parent injector and not from the current component's injector.

Example:

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


@Component({
  selector: 'app-skip-self-example',
  template: `<p>Skip Self Example Component</p>`,
  providers: [LoggerService] // Providing LoggerService at the component level
})
export class SkipSelfExampleComponent {
  constructor(@SkipSelf() private logger: LoggerService) {
    this.logger.log('SkipSelfExampleComponent initialized');
  }
}

In this example:

• The LoggerService is provided at the component level.
• The @SkipSelf decorator ensures that Angular skips the current component's injector and looks for the LoggerService in parent injectors.

3. @Host Decorator

Purpose: The @Host decorator ensures that Angular resolves the dependency from the injector of the host component or directive. It prevents Angular from looking up the dependency in ancestor injectors beyond the host.

Use Case: Use @Host when you want to ensure that a service is resolved from the host component's injector.

Example:

import { Directive, Host } from '@angular/core';
import { LoggerService } from './logger.service';
@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(@Host() private logger: LoggerService) {
    this.logger.log('HighlightDirective initialized');
  }
}
@Component({
  selector: 'app-host-example',
  template: `<div appHighlight>Host Example Component</div>`,
  providers: [LoggerService] // Providing LoggerService at the component level
})
export class HostExampleComponent {}

In this example:

• The LoggerService is provided at the host component level (HostExampleComponent).
• The @Host decorator ensures that the LoggerService is resolved from the host component's injector.

4.  @Optional

• Graceful Degradation: Allows a component or directive to function even if a certain dependency is not provided.
• Flexibility: Makes it easier to create reusable components that can work with or without certain services.

The @Optional decorator in Angular is used to indicate that a dependency is optional. If the dependency is not available, Angular will inject null instead of throwing an error. This is useful when you want to make a service or dependency optional for a component or directive.

Use Case

Use @Optional when you want to make a dependency optional, meaning the component or directive should still work even if the dependency is not available.

Example

Let's consider an example where we have a LoggerService that we want to make optional for a component.

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


@Component({
  selector: 'app-optional-example',
  template: `<p>Optional Example Component</p>`,
})
export class OptionalExampleComponent {
  constructor(@Optional() private logger: LoggerService) {
    if (this.logger) {
      this.logger.log('OptionalExampleComponent initialized');
    } else {
      console.log('LoggerService is not available');
    }
  }
}

Combining @Optional with Other Decorators

You can combine @Optional with other decorators like @Self, @SkipSelf, and @Host to create more complex dependency injection scenarios.

Example: Combining @Optional and @Host

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


@Directive({
  selector: '[appHighlight]',
})
export class HighlightDirective {
  constructor(@Host() @Optional() private logger: LoggerService) {
    if (this.logger) {
      this.logger.log('HighlightDirective initialized');
    } else {
      console.log('LoggerService is not available in the host component');
    }
  }
}


@Component({
  selector: 'app-host-example',
  template: `<div appHighlight>Host Example Component</div>`,
  providers: [LoggerService], // Providing LoggerService at the component level
})
export class HostExampleComponent {}

1. Directive Definition:

   • The HighlightDirective uses both @Host and @Optional decorators to inject LoggerService.
   • This ensures that LoggerService is resolved from the host component's injector, and it's optional.

2. Component Definition:

   • The HostExampleComponent provides LoggerService at the component level.
   • If LoggerService is available, the directive logs a message using the service.
   • If LoggerService is not available, it logs a fallback message.

Note:

• @Optional Decorator:

  • Indicates that a dependency is optional.
  • If the dependency is not available, Angular injects null instead of throwing an error.
  • Useful for creating flexible and reusable components and directives.

• Combining with Other Decorators:

  • You can combine @Optional with @Self, @SkipSelf, and @Host to create complex dependency injection scenarios.
  • This allows for fine-grained control over how and where dependencies are resolved.

Things to rember

• @Self: Ensures the dependency is resolved from the current component's injector.
• @SkipSelf: Skips the current injector and looks for the dependency in parent injectors.
• @Host: Ensures the dependency is resolved from the host component's injector.

These decorators provide fine-grained control over how dependencies are resolved in Angular, allowing you to create more modular and maintainable applications.