Request a clone feature with its Angular content attached

[GreenFlag31]

Request a clone feature with its Angular content attached

[pkozlowski-opensource]

I would need a fast, efficient, and synchronous Angular clone method that clone the HTML element as the cloneNode Javascript method WITH all its Angular elements attached.

A <ng-template> + TemplateRef + ViewContainerRef is the way of achieving this. Those are very much optimized for what they need to do - that is - support all existing Angular functionality.

I don't think we can expect Angular template cloning to be as fast as DOM template cloning - there is just more work to be done.

There are multiple widgets libraries that use the Angular API to deliver widgets with adequate performance but I'm happy to look into specific performance bottlenecks if you can share a minimal reproduce scenario of the <ng-template> + TemplateRef + ViewContainerRef being "slow".

[GreenFlag31]

Not able to make this work or not possible within my current configuration. I have a ng-content which is used for content projection. Due to the nature of ng-content, it will not be rendered multiple times.

Ts:

@ViewChild('tpl', { read: TemplateRef }) tpl!: TemplateRef<any>;
@ViewChild('vc', { read: ViewContainerRef }) vc!: ViewContainerRef;
...
this.vc.createEmbeddedView(this.tpl);
this.vc.createEmbeddedView(this.tpl);

Template:

<ng-container #vc></ng-container>
<ng-template #tpl>
  <ng-content></ng-content>
</ng-template>

=> this is only rendered once.

Using a select attribute on the ng-content does not solve the problem (doc), the nature of ng-content does not allow duplication of template content.

Please let me at least try and think about potential solutions before anticipatively close the ticket.