`this` not set to component instance when creating component programatically

I have a directive that reads src attribute and appends a DynamicComponent. It also sets an input property of Dynamic component.

@Directive({
selector: '[appDynamic]'
})
export class InjectDirective {
@ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;

constructor(
private element: ElementRef,
private viewContainerRef: ViewContainerRef,
private componentFactoryResolver: ComponentFactoryResolver
) { }

ngOnInit(){
const nativeElement = this.element.nativeElement;
const src = nativeElement.getAttribute('src');

if (src) {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
const componentRef = this.viewContainerRef.createComponent(componentFactory);
componentRef.instance.mediaPath = src;
const parent = this.element.nativeElement.parentElement;
parent.insertBefore(componentRef.location.nativeElement, this.element.nativeElement.nextSibling)
}
}
}


The injection happens, but I can't read mediaPath in the DynamicComponent due to this not being set to the right value. this is an object that only has property __ngContext__.

export class DynamicComponent implements OnInit {

@Input() mediaPath:string;
constructor() { }

ngOnInit(): void {
}

openSection(event){ // click event
console.log(this); // this does not refer to instance of DynamicComponent
console.log(this.mediaPath); // this.mediaPath is undefined
}

}


What is the correct way of creating a component dynamically and also passing values to the component properties? I am using angular 13.

Continue reading...