i try to create a dynamic component and trigger a change detection by the ComponentRef
I try to create a dynamic component and trigger a change detection by the ComponentRef, but it doesnt work.
Component failed to trigger onChanges event.
const dynamicCompContent = document.createElement(`${mountElId}-dynamic-component`);
// Create the component and wire it up with the element
const factory = this.componentFactoryResolver.resolveComponentFactory(component);
const ModalContentComponentRef: ComponentRef<any> = factory.create(this.injector, [], dynamicCompContent);
// Attach to the view so that the change detector knows to run
this.applicationRef.attachView(ModalContentComponentRef.hostView);
// Listen to the close event
this.compIdToSubscriptionMap[compInsId] = this.destroyModalSubscription.subscribe((compId: string) => {
if (compId !== ModalContentComponentRef.instance.compId) { return; }
this.applicationRef.detachView(ModalContentComponentRef.hostView);
try { dynamicCompContent.parentNode.removeChild(dynamicCompContent); } catch (err) { }
this.compIdToSubscriptionMap[compId].unsubscribe();
delete this.compIdToSubscriptionMap[compId];
});
// Set the params
const compData = { input1:1, input2: 2 };
const updateObject = { ...compData, compId: compInsId, mountElId };
for (const key of Object.keys(updateObject)) {
ModalContentComponentRef.instance[key] = updateObject[key];
}
// const cdr = this.injector.get(ChangeDetectorRef); // it can not trigger a onChange event
// ModalContentComponentRef.instance.cdr = cdr; // it can not trigger a onChange event
// ModalContentComponentRef.changeDetectorRef.detectChanges(); // it can not trigger a onChange event
// ModalContentComponentRef.instance?.cdr?.detectChanges(); // it can not trigger a onChange event