Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] #511

Closed
nuno-tiago-reis opened this issue Aug 7, 2023 · 2 comments
Closed

[Bug] #511

nuno-tiago-reis opened this issue Aug 7, 2023 · 2 comments
Labels

Comments

@nuno-tiago-reis
Copy link

nuno-tiago-reis commented Aug 7, 2023

Describe the bug
We've started using ng-dynamic-component some weeks ago and our application is state driven. So we're rendering a list of dynamic components. We've been having an issue where the components seem to be recreated, even though we're using trackBy inside our ngFor, so it doesn't recreate the DOM from scratch every time the array changes. I've linked a stackblitz below that exemplifies this issue, the first scenario using ng-dynamic-component and the second scenario using ngComponentOutlet, I think it should be clear what the issue is.

This stackblitz has three simple components, that increment a number based on a set interval, and every time the component is recreated, the number gets reset to 0.

In the ng-dynamic-component scenario, every time the array gets shuffled using the Shuffle button, the numbers remain what they were before. However, when we use the Shuffle with Clone button, the numbers all reset to 0.

In the ngComponentOutlet scenario, every time the array gets shuffled using either button, the numbers remain what they were before.

The difference between the two buttons is that one of them is using lodash.clonedeep to clone the array that we're iterating, but other than that, they do the exact same thing.

Expected behavior
We would expect the component to not be recreated since the component type itself didn't change. If this is a known limitation, is there any way we can get around it?

Reproduction
Stackblitz

Screenshots
image

Thanks!

@gund
Copy link
Owner

gund commented Aug 7, 2023

Emm, in your repro case you clearly forgot to add trackBy to the ngFor directive used with ndc-dynamic component...
image

Once you add it it works as expected.
Can't see any issues with the library and we have full suite of unit tests covering exact cases when a dynamic component should be recreated and when not so that's probably just something you forgot.

@nuno-tiago-reis
Copy link
Author

You're right I missed that in the stackblitz, there must be something else wrong with our implementation then, I'll have to check again tomorrow. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants