Encountering difficulty retrieving host component within a directive while working with Angular 12

Question

Encountering difficulty retrieving host component within a directive while working with Angular 12

After upgrading our project from Angular 8 to Angular 12, I've been facing an issue with accessing the host component reference in the directive.

Here is the original Angular 8 directive code:

export class CardNumberMaskingDirective implements OnInit {

  unmaskedValue: string;

  constructor(private control: NgControl,
              private element: ElementRef,
              private _viewContainerRef: ViewContainerRef) {}

  ngOnInit() {
    this.hide(this.element.nativeElement);
  }

  @HostListener('focusout', ['$event.target'])
  hide(input) {
    const host = this._viewContainerRef['_view'].component;
    if (host['disableMask'] instanceof Function) {
      host['disableMask'](this.control.name);
      setTimeout(() => {
        this.unmaskedValue = input.value;
        const value = input.value.replace(/\s/g, '');
        if (value.length > MASKED_LENGTH) {
          const formatted = input.value.replace(MASKING_REGEXP, '●●●● ●●●● ●●●● ');
          this.control.valueAccessor.writeValue(formatted);
        }
      }, 0);
    }
  }

  @HostListener('focusin', ['$event.target'])
  show(input) {
    const host = this._viewContainerRef['_view'].component;
    const value = input.value.replace(/\s/g, '');
    if (value.length > MASKED_LENGTH) {
      this.control.valueAccessor.writeValue(this.unmaskedValue);
    }
    if (host['enableMask'] instanceof Function) {
      host['enableMask'](this.control.name);
    }
  }

}

In Angular V12, the usage of _view has changed to _hostLView for accessing the component reference. However, even after using

this._viewContainerRef['_hostLView '].component;

, I'm still unable to get the component reference.

I came across a similar question on Stack Overflow and tried the solution provided here, but unfortunately, it didn't work for me as I wasn't able to retrieve the component references. Any suggestions would be greatly appreciated.

angular typescript angular12

Answer 1

Answer №1

There is no one-size-fits-all solution, an alternative approach is to utilize the standard InjectionToken:

export interface IComponent {}

export const token: InjectionToken<IComponent> = new InjectionToken<IComponent>('IComponent');

@Component({
providers: [{provide: token, useExisting: forwardRef(() => MyComponent1)}]
})
export class MyComponent1 implements IComponent {}

@Component({
providers: [{provide: token, useExisting: forwardRef(() => MyComponent2)}]
})
export class MyComponent2 implements IComponent {}

@Directive({})
export class MyDirective {
    constructor(@Inject(token) component: IComponent){}
}

To add more rigidity, you can incorporate @Host() and/or @Self().

Answer 2

There is no one-size-fits-all solution, an alternative approach is to utilize the standard InjectionToken:

export interface IComponent {}

export const token: InjectionToken<IComponent> = new InjectionToken<IComponent>('IComponent');

@Component({
providers: [{provide: token, useExisting: forwardRef(() => MyComponent1)}]
})
export class MyComponent1 implements IComponent {}

@Component({
providers: [{provide: token, useExisting: forwardRef(() => MyComponent2)}]
})
export class MyComponent2 implements IComponent {}

@Directive({})
export class MyDirective {
    constructor(@Inject(token) component: IComponent){}
}

To add more rigidity, you can incorporate @Host() and/or @Self().

Answer 3

Answer №2

To utilize your host component within a directive, you can leverage Dependency Injection (DI).

For instance:

constructor(
 @Self() private readonly module: HostModule
) {}

Answer 4

To utilize your host component within a directive, you can leverage Dependency Injection (DI).

For instance:

constructor(
 @Self() private readonly module: HostModule
) {}

Encountering difficulty retrieving host component within a directive while working with Angular 12

Answer №1

Answer №2

Similar questions

Unlocking the Secrets of AnimatedInterpolation Values

Unleashing the power of RXJS: Leveraging IntervalObservable coupled with the

Upon loading a website, the Chrome browser will automatically set the zoom level to 80%

What are the steps to set up NextJS 12.2 with SWC, Jest, Eslint, and Typescript for optimal configuration?

What is causing Angular to consistently display the first object in the array on the child view, while the child .ts file correctly prints information from a different object?

Navigating from a Card to a new View in Angular

Activate the mat-menu within a child component using the parent component

Is CORS necessary when using npm, and is Putty a viable tool for web application development?

Is it better to store data individually in localStorage or combine it into one big string?

Exploring Angular observables: Tips for gathering specific fields from a nested array within an object into a new array

TypeScript has encountered an issue where a specific type A cannot be assigned to another type A, even though

Encountering an issue in Angular 4 AOT Compilation when trying to load a Dynamic Component: Error message states that the

Set an enumerated data type as the key's value in an object structure

An error occurred: The property 'toUpperCase' cannot be read of an undefined Observable in an uncaught TypeError

Learn the process of adjusting the Time Zone in Angular2-HighCharts!

Enforcing alias types in TypeScript arguments is necessary for maintaining consistency and clarity

I'm curious if there is an eslint rule specifically designed to identify and flag any unnecessary spaces between a block comment and the function or

Malfunctioning designs arise when Angular-CLI deploys application with webpack

Tips for addressing the error "Ensure each child in a list has a distinctive 'key' prop" in a React function using TypeScript

Is it necessary to unsubscribe from an Angular HTTP-Request when using switchMap?