Working with ngTemplate

Before going into more info about ngTemplate, let us understand few things. I have a requirement saying 

component[template]
       |
     <div>
       prodid: ..
       name  : ..
        ..                                 =======>repetition of UI for prod info   display
     </div>                                               |
                                                     the solution is ng template
        some content

      <div>
       prodid: ..
       name  : ..
        ..
      </div> 
         

      some content

ng-template is used to create reusable UI block (or) template with in a component

Syntax:
   <ng-template #templatename>
        UI code
   </ng-template>

*template name should be prefixed with # symbol
*ng-template can be called| referenced in 2 ways
 1.using *ngTemplateOutlet
 2.using *ngIf


 *ngTemplateOutlet is used to call ngtemplate from a tag
  syntax:
      <tagname *ngTemplateOutlet="templatename">
      </tagname>

For calling the  template we need to use ngTemplateOutlet.


Example

Create a component







Make changes to index.html as below













Make changes to appModule.ts












.ts Changes













.html changes

<ng-template #prodinfo>
    <div style="font-size:x-large;border:5px solid black;width:30%">
       prodid:p001 <br>
       name:{{prodName}} <br>
       price:50000 
   </div>
   </ng-template>
   <!--calling template-->
   <span *ngTemplateOutlet="prodinfo">
   </span>
   <h2>some content</h2>
   <span *ngTemplateOutlet="prodinfo">
   </span>
   <h2>some other content</h2>

Output






















Note:
----
*ng-container is a non rendering container tag provided by angular, this
 acts like a dummy tag, which will not be loaded into browser DOM, this
 provides better performance compare to normal html element
 [like span in the above case]

     go to ngtemplate.component.html[replace span with ng-container for better performance]















Template Calling 1 , Template Calling 2--Avoiding repetition of code.













Implicity you want to specify price , that can be done by


<ng-template #prodinfo let-price>
    <div style="font-size:x-large;border:5px solid black;width:30%">
        prodid:p001 <br>
        name:{{prodname}} <br>
        price:{{price}}
    </div>
</ng-template>
<!--calling template-->
<ng-container *ngTemplateOutlet="prodinfo;context:{$implicit:50000}">
    |
</ng-container> include
<h2>some content</h2> |
<ng-container *ngTemplateOutlet="prodinfo;context:{$implicit:40000}">
</ng-container>
<h2>some other content</h2>















From the above image, at the first step we are declaring the price- second step
we are implicitly providing price value.
























  ng-template      -->this is used to create reusable UI block
  *ngTemplateOutlet -->this is used to call template from a tag
   ng-container     -->this is a non rendering container tag