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:

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

Leave a Reply

avatar
  Subscribe  
Notify of