Reputation: 692
I try to implement nested translations in Angular (content of a link has translation, and this link has to be embedded into another translation), and it all boils down to me to the following scenario:
<ng-template #link>
<a href="#">Test</a>
</ng-template>
<p>Your link: {{link}}</p>
However, in the above case link
is the TemplateRef object. So my question is, how do I replace the content of the braces with the contents of the TemplateRef?
Thank you in advance!
Upvotes: 2
Views: 1203
Reputation: 658263
update Angular 5
ngOutletContext
was renamed to ngTemplateOutletContext
See also https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
original
NgTemplateOutlet
does what you want:
<p>Your link: <ng-container *ngTemplateOutlet="link"></ng-container></p>
You can also pass context data to be used for bindings inside the template.
https://angular.io/api/common/NgTemplateOutlet
Searching for NgTemplateOutlet
on StackOverflow should provide several more examples.
update
<ng-template #linkTemplate let-link>
<a href="#">{{link}}</a>
</ng-template>
<p>Your link: <ng-container *ngTemplateOutlet="linkTemplate; context: {$implicit: link}"></ng-container></p>
Upvotes: 4
Reputation: 21698
You can also fit a template with condition in below way. incase you want to load your template in else condition.
<ng-content *ngIf="!content; else link">
</ng-content>
<ng-template #link>
<div [innerHtml]="otherContent">
</div>
</ng-template>
</div>
Upvotes: 0