In Angular Child created dynamically don't get their @Input updated

I have created a simple demo of my issue HERE.

So I have a parent which have a topics list (just an array of string), this topics list is generated randomly each time we click on the button generate (button which is in the parent)

Then I have a component named child which takes as input the topics list and a title.

When I create this child through the DOM it works as expected. But when I create the exact same child component but programmatically then the topics list is not updated.

So when I create this child through the DOM like this:

<app-child [topicsList]="topicsList" [title]="'Child created from the DOM'"></app-child>

It is working as expected, when I click on generate, the child get the updated topics list and display it. But when I create the exact same child component but programmatically like this:

this.mChildRef = this.mViewContainerRef.createComponent(ChildComponent);
this.mChildRef.setInput('topicsList', this.topicsList);
this.mChildRef.setInput('title', "Child created dynamically");

then the topics list is not updated.
I tried with public variables instead of @Input and set the Inputs like this:
this.mChildRef.instance.topicsList = this.topicsList
I also tried to play with:
this.mChildRef.changeDetectorRef
I try to get changes through ngOnChanges but this event is fired only at the creation of the child component.

But nothing works...

enter image description here

I have probably missed something but I don't know what, maybe a specific configuration in the component or an extra parameter to pass when I create the component.

Thank you for your help

Below is the answer you can use for Stack Overflow:

// Create a map of dynamic child components
private childComponentsMap: Map<string, ComponentRef<ChildComponent>> = new Map();

// Add child component to the map
this.childComponentsMap.set('Id' + this.componentId, this.mChildRef);

// Iterate through the child components map and update the topics list
this.childComponentsMap.forEach((componentRef) => {
  componentRef.instance.topicsList = this.topicsList;
});

In the provided code snippet, the childComponentsMap is created as a Map to store the dynamically created child components. Each component is added to the map using a unique identifier ('Id' + this.componentId) as the key and the corresponding ComponentRef<ChildComponent> as the value.

To update the topics list for all the child components, you can iterate through the childComponentsMap using the forEach method. Within the loop, you can access each component reference (componentRef) and set its topicsList property to the updated this.topicsList value.

This approach allows you to maintain a map of dynamically created child components and easily update their properties as needed.

I hope this helps to resolve your issue. Let me know if you have any further questions!

you have to explicitly update the input if the component was created dynamically

// after list update
this.mChildRef.setInput('topicsList', this.topicsList);

you could also do something tricky like emplacing elements in the original list that was bound to component input

this.topicsList.splice(0, 999, ...topicsList);

but do it at your risk, because it can cause bugs that are hard to debug and it won't work with OnPush strategy

If I've right understood, you need to update onGenerateTopicsList method:

onGenerateTopicsList(): void {
  // your existing code...  
  this.mChildRef.setInput('topicsList', this.topicsList);   
}