ngTemplate is a light-weight DOM-based template engine, inspired by AngularJS.
Template expressions are a JavaScript code that NgTempplate
evaluates in the data scope (models/collections). So we can simply address a variable <i data-ng-text="world.name"></i>
or run an expression <i data-ng-if="world.counter > 10"></i>
Expressions evaluate in the context of the target element, so we can access the element with this
:
data-ng-if="foo && this.checked"
❗ NOTE: In order to gain better performance keep to primitive expressions especially in cyclic directives e.g.
data-ng-text="foo.bar.baz"
,data-ng-text="!foo.bar.baz"
,data-ng-text="'string here'"
,data-ng-if="foo.bar > baz.quiz"
,data-ng-text="foo + 10
,data-ng-if="true"
,data-ng-prop="'disabled', true || false"
,data-ng-data="foo || bar, baz"
. Such expressions are being evaluated without use ofeval()
and therefore the process takes much less time and resources. You can check how the parser treats your expressions by studying content oftemplate.report().tokens
array
We use HTML-compliant data-ng-*
custom attributes to tell the template how exactly we want to bind the scope data to the element
NOTE:
data-ng-class
,data-ng-prop
,data-ng-attr
,data-ng-data
can be applied multiple times on an element likedata-ng-class-0
,data-ng-class-9
We use NgText
to modify element's textNode
<i data-ng-text="foo"></i>
We use NgProp
to modify element's properties
<button data-ng-prop="'disabled', isDisabled"></button>
We use NgAttr
to modify element's attributes
<input data-ng-prop="'required', isRequired">
We use NgData
to modify element's dataset
<div data-ng-data="'dateOfBirth', value"></div>
We use NgClass
to modify element's classList
<i data-ng-class="'is-hidden', isHidden"></i>
We use NgFor
to toggle visibility of an element (subtree) within the DOM
<i data-ng-if="toggle">Hello!</i>
We use NgFor
when we need to generate a list of elements (subtrees)
<i data-ng-for="let row of rows" data-ng-text="row"></i>
We use NgSwitch
when we need to display on element (subtree) of a set of available options.
<div data-ng-switch="theCase">
<i data-ng-switch-case="1">FOO</i>
<i data-ng-switch-case="2">BAR</i>
<i data-ng-switch-case-default>BAZ</i>
</div>
We use NgEl
to modify element properties
NOTE: Using
NgEl
is rather discouraging as it cannot be cached and every model sync will cause the DOM modification even if the expression ofNgEl
wasn't changed
<i data-ng-el="this.textNode = mymodel.foo"></i>
<i data-ng-el="this.setAttribute( 'name', mymodel.foo )"></i>
<i data-ng-el="this.disabled = state.isVisible"></i>
<i data-ng-el="this.classList.toggle('name', model.foo)"></i>