Duplicated ng-content and *ngTemplateOutlet
Recently (Angular component with varying appearance) I wrote how to use the same <ng-content> twice in a switch case.
Today I hit upon explanation of this fact in a GitHub issue (https://github.com/angular/angular/issues/22972) and I found another problem.
Namely, it is not possible to display at the same time twice the same <ng-content> even if it is packed inside a <ng-template>. Therefore the following example will not work:
As a result, only the first button will be displayed and the contents of the second button will be blank.
Interestingly, the same example but with <ng-template> not referring to a <ng-content>, will work:
By the way, I’ve put together a small collection of tools I use regularly — things like time tracking, Git helpers, database utilities, and a few others that make development a bit smoother.
It appears that <ng-content> may be displayed only once, but there is no limit on displaying multiple <ng-template> instances.
Lessons learned
It is not possible to display one
<ng-content>more than once
Thanks for sharing this. I thought I was the only one, so it’s nice to see others coming to the same conclusion 🙂