Article Details
Id:17419
Product:finPOWER Connect
Type:NEW
Version:3.03.04
Opened:23/09/2020
Closed:02/10/2020
Released:02/12/2020
Job: J025113

HTML Widgets and Portals; Angular style tags; New "ng-termplate" tag

A new Angular-style tag named "ng-template" can be used in HTML Widgets and Portals.

This can be used to represent complex HTML structures that you may want to appear more than once when data binding.

The example below shows a loop that repeats a "template":

<div ng-repeat="for item in mRecord.Upcoming">
    <div ng-bind="item.Description"></div>
    <div ng-template="templateOpportunity"></div>
</div>


    <!-- BEGIN Templates -->
    <div style="display:none">
      <!-- BEGIN Opportunity Template -->
      <div id="templateOpportunity">
        <div class="header">
          <h1 ng-bind="item.Status"></h1>
          <h2 class="description" ng-bind="item.Description"></h2>
        </div>
        <div class="image"><img ng-bind-attribute-name="src" ng-bind-attribute-value="item.ImageUrl" /></div>
        <div class="details">
          <div class="type"><h3>Type</h3><div ng-bind="item.Type"></div></div>
          <div class="term"><h3>Term</h3><div>12 Months</div></div>
          <div class="return"><h3>Return</h3><div>14.32% p.a.</div></div>
          <div class="security"><h3>Security</h3><div>1st Mortgage</div></div>
        </div>
      <!-- END Opportunity Template -->
    </div>
    <!-- END Templates -->

NOTE: Any element with an "ng-template" attribute will have its child elements cleared before inserting the contents of the template, i.e., the template will become the content of the element.

Nested Templates are not supported.