Duplicated ng-content and *ngTemplateOutlet

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:

HTML
component.html

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:

My related project

E-book: How to set up free WordPress platform for IT blogs

Do you want to set up a typical blog but you don’t know how to start, which plugins to use or how to customize the site? I spent a few weeks in total doing that from scratch – from learning the ecosystem to adjusting the platform to my very specific needs. Now I want to share with my experience and make the start easier for you.

HTML
component.html

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

1.7 14 votes
Article Rating

Want more?

Share!

Subscribe
Notify of
guest
1 Comment
Inline Feedbacks
View all comments
Prid
Prid
1 year ago

Thanks for sharing this. I thought I was the only one, so it’s nice to see others coming to the same conclusion 🙂

1
0
Would love your thoughts, please comment.x
()
x