ngTemplate API

import { NgTemplate } from "ng-template";

let template = new NgTemplate( el, tpl ); // compile template
template.sync( scope ); // render on the first run and after synchronize it with the scope
// optional
console.log( template.report() ); // find the synchronization details

where:

• el - a DOM element we bind to
• tpl - OPTIONAL: template code that will be injected into el
• scope - an object literal (template scope) whose members form the scope for template expressions

Also can be instantiated via the factory:

NgTemplate.factory( el, tpl )
  .sync( scope );

Report

You can get template synchronization details like that:

let tpl = new NgTemplate(
  document.createElement( "div" ),
  "<span data-ng-text=\"foo.bar.baz\"></span>"
);
tpl.sync({});
console.log( tpl.report().errors ); // [ "'foo.bar.baz' is undefined" ]

Options

You can define though the constructor options the callbacks willMount and didMount. The first one gets invoked straight before the ngTemplate populates bounding element's inner HTML from the template string. ngTemplate calls the second callback after that:

import { NgTemplate } from "ng-template";
let template = new NgTemplate( el, tpl, {
 willMount: function(){
    console.log( "Template is up to initial rendering" );
  },
  didMount: function(){
    console.log( "Template just finished initial rendering" );
  }
});