title: Angular (9) cache component as it would be rendered to allow fast switching
body: <p>I'm using Plotly.js, and the component for Angular (<a href="https://github.com/plotly/angular-plotly.js" rel="nofollow noreferrer">https://github.com/plotly/angular-plotly.js</a>). Overall, the component for Angular is generally much easier to work with than the raw JS api, but with that I think comes certain limitations.</p>
  
  <p>Is there a way to cache an Angular component when it is rendered, so that if I display it again, calculations associated with the component do not need to be run again? I want to quickly switch between a set of components without waiting for the rendering each time.</p>
  
  <p>I understand that Angular principles and structural directive favour dynamic addition or removal of a component which will add or remove it from the DOM completely. However, this would destroy the associated data, which I explicitly want to avoid.</p>
  
  <p>I came across this: <a href="https://stackoverflow.com/questions/56339414/serialize-angular-component">Serialize Angular Component</a> which mentions the possibility of serializing a component. If I do that, I could store the component in a service and recall it as desired. Can this be done or is there something I'm missing?</p>