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.