The Angular 2 panel bar creates its contents again and again on every event, when its contents needs displayed. This seems not to hurt much, when the inner structure is merely a few simple DOM Elements. But what, if the embedded component expensive to be constructed (because it may need a server request) and possibly very complex (because it may be host to a sohphisticated spreadsheet component, which it is in my case)?
Here is an example (full source in Plunker here): assume you are nesting the expensive component in the panelbar, just like the examples suggest to do:
<kendo-panelbar> <kendo-panelbar-item [title]="'First Title'"> <template kendoPanelBarContent> <my-expensive-component></my-expensive-component> </template> </kendo-panelbar-item> <kendo-panelbar-item [title]="'Second Title'">...</kendo-panelbar-item></kendo-panelbar>
Initially, the panel bar just only the headers "First...", "Second"... when you open one of them, the content is created. That will take some while. When this is finished, the full content is visble. Now when you click on the "Second" panel, a strange thing happens: the second content is lazily created (that's ok) but also the first section is created again, even if it remains visible all the time. That is unexpected.
Even if the above behaviour is only a bug, I fear that the design of the PanelBar component is a bit too simplistic: whenever one opens / closes one of the panels in the stack, the inner component will be constructed, again and again and again ... can this be avoided?
If it would be only about the private data, one could think of a workaround, where the data is stored not in the component, but in a service, which gets injected. That would not necessarily result in beautiful code, but it may do the trick for the component's data. But what about inner complex DOM structure? My use case is, that inside the panel bar, I would like to put an Excel Spreadsheet (SpreadJS) - I would not just recreated the entire spreadsheet, on every show/hide event.
By the way - the same problem also applies to the Angular-Tab component. That one seems to have the identical create-from-template behaviour. Is there anything I can do about the frequent reconstruction of the components?
4 Answers, 1 is accepted
Rank 1
Rank 1
Thank you for contacting us. The described issue is fixed in the latest PanelBar version, and the content of an expanded item is not recreated when another item is expanded (if the first one remains open):
http://plnkr.co/edit/hiPtZPG1d6fJpA4p8gGC?p=preview
As for destroying and recreating the item's content on collapse/expand, we are working on a providing a configuration option, similar to the TabStrip's keepTabContent one that will allow the developer to configure whether a PanelBar item's content should be persisted in the DOM.
Regards,
Dimiter Topalov
Telerik by Progress
Rank 1