CODEWITHSUNDEEP
angular
nakajuice
nakajuice

Reputation: 692

How do I insert a template while interpolating in Angular 4?

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

Answers (2)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

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>

Plunker example

Upvotes: 4

Aniruddha Das
Aniruddha Das

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

Related Questions