As a rule of thumb, we recommend you not use this approach. However, in a very small set of edge cases, this may be the only viable way to resolve some issue, especially as a temporary tactical fix. In the sections below, we'll discuss when this type of approach is recommended, alternative approaches to take, and how to implement the code for this, both for destroying + reloading Angular components and standard HTML elements.
When Should this Approach be Used?
The component in question is a 3rd party component which does not handle changes properly and whose codebase you have no control over.
The strategy of fully destroying and rerendering an Angular component should only be considered in this scenario and should only be used if all other attempts to properly pass data and rerender via normal means have failed. In the section below, we'll discuss some alternative approaches.
Alternative Approaches to Try First
- Ensure the input property to the component is actually updating: the issue may actually be with the way data is being sent to the component, not to the component itself.
- Pass the data via observable properties: if data is being passed in with non-observable properties, try using a BehaviorSubject to store the value, and pass in the behavior subject with an async pipe to the component instead.
- Check if ngOnChanges is needed: if you own the component which is not updating properly, check to see if we need to add a hook to ngOnChanges. In some situations, the component will need to perform some action at the moment new data is passed in. If this is needed but missing, this may be the root cause.
- Check the documentation: if you are using a 3rd party component, Angular or otherwise, check its documentation to ensure that you are passing in data correctly and the way the component is expecting to receive it. Also check if there is any manual function invocation required once data is passed in.
How to Implement
- Wrap the component or element in an ng-container.
- Create a property on the consuming component isVisible$. The default should be true.
- Create an *ngIf condition on the ng-container using isVisible$.
- When it is time to rerender, set the subject to false for a brief time, then set back to true.
In this implementation strategy, we introduce a small period of time where the component does not exist at all on the DOM. When the behavior subject value is set back to true, it is then re-created. In our example below, we use setTimeout to destroy the component, then almost immediately rerender it:
Alternatively, within the HTML markup, the conditional statement could be applied to the component itself instead of wrapping in an ng-container, if it doesn't already have an ngIf.
As a concluding remark, note that change detection was not used in this implementation.