Angular 9 access component in directive

Question

I upgraded an angular 8 app to an agular 9 app. In one of my directives I access the component trough the viewcontainer _data attribute. This no longer seems to exist in angular 9. How can I access the component in angular 9 ?

I have multiple inputs with an viewchild 'errorContainer'. They all inherit from Abstractinput. This way when I have a formcontroll, trough the directive I can put errors on the components.

@Directive({
    selector: '[formControl], [formControlName]'
})
export class DefaultControlErrorDirective implements OnDestroy, OnInit {

    constructor(private vcr: ViewContainerRef) {
      const component = this.vcr['_data'].componentView.component
    }
}

Abstract input:

@Component({
    template: ``
})
export class InputAbstractComponent implements ControlValueAccessor, OnInit {
    @ViewChild('errorContainer', {read: ViewContainerRef}) errorContainerRef: ViewContainerRef;
}

Implementation of abstract input

@Component({
    selector: 'tg-form-input',
    templateUrl: 'input.html',
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => InputComponent),
            multi: true
        }
    ]
})
export class InputComponent extends InputAbstractComponent implements AfterViewInit {
}

Input.html

<div #errorContainer></div>

Andrei Andrei · Accepted Answer · 2020-02-14T10:08:05

just inject your component

constructor(myComponent: MyComponent) {
}

if the component isn't always the same component you could do this through providing it with some token

@Component({
providers: [{provide: COMPONENT_FOR_DIRECTIVE_TOKEN, useExisting: AnyComponent}]
})
class AnyComponent {
}

Angular 9 access component in directive

1 Answers