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:

Note: I'll soon be sharing short, practical tips on Angular — a good way to pick up something new if you're interested.

It appears that <ng-content> may be displayed only once, but there is no limit on displaying multiple <ng-template> instances.

Lessons learned

Read next

• Add Jasmine unit testing support to Angular in StackBlitz
• Angular component with varying appearance and click event
• Angular: extract a module with existing components and important lesson about NgModule
• Angular – enums and switch case in templates
• Make a sidebar always visible regardless of scroll