How to reuse template HTML block in Angular?

Question

Lets suppose we have html block in file:

<div id="text">Text</div>

How can I reuse this html code below in the same file, I mean something like this:

<re-use id="text"></re-use>

Is it possible?

Answer 1

I think you wanted to reuse the same html block again. If i understand you correctly, below code should help

<ng-template #MsgRef >
        {{ mycontent }}
</ng-template>

To reuse above block in the same template,

 <ng-template [ngTemplateOutlet]="MsgRef"></ng-template> //reuse any number of times

Answer 2

Creating a new component is the most common way, but sometimes you only need some local markup to be repeated and ng-template allows that.

What is interesting is that it's even possible to pass a context to be able to use data binding:

<ng-template #tplPerson let-person>
    <span class="person-id">{{person.id}}</span>
    <span class="person-alias" *ngIf="!!person.alias">"{{person.alias}}"</span>
    <span class="person-name">{{person.name}}</span>
</ng-template>

let-person without a value defines the context variable person with the value set to $implicit when instantiating the template:

<ng-template *ngTemplateOutlet="tplPerson; context: {$implicit: thePerson}"></ng-template>

See more options in the documentation of NgTemplateOutlet.