# Template Syntax [ngTemplate](https://github.com/dsheiko/ng-template) is a light-weight DOM-based template engine, inspired by AngularJS. ## Template expressions Template expressions are a JavaScript code that `NgTempplate` evaluates in the data scope (models/collections). So we can simply address a variable `` or run an expression `` Expressions evaluate in the context of the target element, so we can access the element with `this`: ``` data-ng-if="foo && this.checked" ``` > :exclamation: 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 of `eval()` and therefore the process takes much less time and resources. > You can check how the parser treats your expressions by studying content of `template.report().tokens` array ## Directives 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 like `data-ng-class-0`, `data-ng-class-9` ### NgText We use `NgText` to modify element's `textNode` ```html ``` ### NgProp We use `NgProp` to modify element's properties ```html ``` ### NgAttr We use `NgAttr` to modify element's attributes ```html ``` ### NgData We use `NgData` to modify element's dataset ```html
``` ### NgClass We use `NgClass` to modify element's `classList` ```html ``` ### NgIf We use `NgFor` to toggle visibility of an element (subtree) within the DOM ```html Hello! ``` ### NgFor We use `NgFor` when we need to generate a list of elements (subtrees) ```html ``` ### NgSwitch We use `NgSwitch` when we need to display on element (subtree) of a set of available options. ```html
FOO BAR BAZ
``` ### NgEl 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 of `NgEl` wasn't changed ```html ```