My app lets the use update list of properties for many Objects. Some of the properties type are option - and some have more than thousands of options.
In order to achieve good performances I've wrapped MatSelect
so it will load more options on scroll.
On first load I'm not loading any options from the list, but only an option with the current value of the property. In order to show the user the value of the property.
In order to use my MatSelect
in a form, I've used the viewProviders
as followed:
viewProviders: [
{
provide: ControlContainer,
useFactory: (container: ControlContainer) => container,
deps: [[new SkipSelf(), ControlContainer]]
}
]
So my goal is, as long as the user didn't open any list it will not load any options.
When the user press on an object from the list, a new formGroup
is generated, properties are displayed according to their types. one of the types are Options
which uses my custom component. My MatSelect
is loading for the first time and adding the first value which is the value of the property.
On second object, a new formGroup
is created, the properties are displayed (if the same object type then the same properties - with different values). But this time is not reaching the code in my MatSelect
wrapper that do the initial process, because Angular reuses the old DOM element and do not creating a new one or disposing the old, and my @Input
are the same as well.
That causes my MatSelect
to be empty, because it has only one option now - the one from the first object.
Is there a way or event to know when Angular is reusing the DOM Element/Component so i can run my initial code over and over again ? I've try many of the lifecycle methods, no luck there.
Or maybe the worst case making my MatSelect
not reusable somehow and it will cause to recreate the component?
As a workaround I'm cloning the object I'm sending to my MatSelect
as @Input
object so i will catch it in my set
property - but must be a better way.