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

Error: Typescript foreach loop encountering 'Expression yields void type'

Return a potential undefined output

Tips for efficiently utilizing Hooks with React Context:

What is the most effective way to receive all values sent to an Observer upon a new subscription?

The date format being sent by Angular to Java is incorrect, resulting in the inability to create an object in the

Data retrieval from DynamoDB DocumentClient does not occur following a put operation

Encountered difficulties when attempting to install Angular Universal in my angular13 application

Condition for rendering child components using Angular guard

By default, the ejs-datetimepicker in @syncfusion/ej2-angular-calendars will have an empty input field

Directive for displaying multiple rows in an Angular table using material design

Encountering errors while working with React props in typing

The Error message "Property 'data' is not present in Type <void> | AxiosHttpResponse<any>" is indicating that the data property is missing on

Using React components within an Angular 6 application: A comprehensive guide

What is the best way to reorganize an object's properties?

A guide on implementing react-pose alongside @reach/router in a React Typescript project

Creating columns on the fly within a row

"Setting Up a Service in Angular: A Step-by-Step Guide

Using ngFor to iterate over a list of items in Angular and displaying them conditionally using ng

Measuring Feedback: Utilizing Angular 4 to calculate review ratings

Using Typescript to resolve a package from a location other than the default node_modules directory