I'm trying to create a dynamic component using Angular's manual:
https://angular.io/guide/dynamic-component-loader
I've successfully created the component but I noticed that I cannot use Material's tooltip.
After investigating it, I realized that the dynamic component gets recreated on each change detection (like when the mouse moves).
The way I understood it is by simply adding a console.log inside the OnInit function in my dynamic component.
And because of it, the tooltip doesn't work because it relies on the component's position before adding the tooltip.
Is that is the expected behavior?
This is the code of the component that loads the dynamic one.
export class UiTableCellComponent implements OnInit, AfterContentChecked {
@Input() dataRow: any;
@Input() columnDef: UitableColumn;
@ViewChild(UitablecompHostDirective) mgmtUitablecompHost: UitablecompHostDirective;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {
}
ngOnInit() {
}
ngAfterContentChecked(): void {
if (this.columnDef.cellDataComponent) {
this.loadComponent();
}
}
loadComponent() {
const componentFactory =
this.componentFactoryResolver.resolveComponentFactory(this.columnDef.cellDataComponent);
const viewContainerRef = this.mgmtUitablecompHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);
(<UitableComponent>componentRef.instance).data = this.dataRow;
}
}