Angular 2 template syntax

Attribute, binding

Use the HTML tag (Attribute) to bind when the element has no attributes to bind.

Consider ARIA, SVG, and table colspan/rowspan etc. (Attribute). They are pure attributes. They have no corresponding properties to bind.

The following example will report an error:

<tr><tdcolspan="{{1 + 1}}">Three-Four</td></tr>

We will get this error:

Template parse errors:
Can't bind to 'colspan' since it isn't a known native property
Template parsing error: cannot bind to 'colspan' as it is not a known native property

As the hint says, <td> element has no colspan property. But interpolation expressions and property bindings can only set properties, not Attribute , so the HTML tag is required Attribute binding to createsomething similar to binding Attribute .

The HTML tag feature binding is syntactically similar to attribute binding, but the part in square brackets is not the attribute name of an element, butis represented by a attr. and the name of the HTML tag attribute, andthen set the value of the HTML tag attribute through an expression that evaluates to a string. Such as:

<table border=1>
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
  <tr><td>Five</td><td>Six</td></tr>
</table>

Css class binding

With the CSS class binding, we can derive from the element’s class add and remove CSS class names on the.

CSS class binding is syntactically similar to property binding. But the part in square brackets is not the attribute name of an element, but includes a class prefix, followed by a dot. (.) followed by the name of the CSS class The latter two parts are optional. For example: [class.class-name] .

The following example shows how to add and remove the “special” class through the css class binding class:

<!-- Standard HTML Style Class Settings -->
<div class="bad curly special">Bad curly special</div>
<!-- By binding to reset or overwrite style classes  -->
<div class="bad curly special" [class]="badCurly">Bad curly</div>
<!-- Add or remove special style classes through a property value -->
<div [class.special]="isSpecial">This style is quite unique</div>

style style binding

With style binding, you can set inline styles. Style binding syntax is similar to attribute binding, but the part in square brackets is not the attribute name of an element, style binding includes a style. followedby the property name of the css style, for example: [style.style-property] .

<button [style.color] = "isSpecial ? 'red': 'green'">red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

<!-- Style binding with units -->
<button [style.font-size.em]="isSpecial ? 3 : 1" >big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >small</button>

Style attributes can be centerline naming (font-size) or hump naming (fontSize).

NgClass

By binding to the NgClass dynamically add or remove CSS classes.

<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
  This div is in large size.
</div>

NgStyle

NgStyle By binding it to a key:value controlling the form of the object allows us to set many inline styles at the same time.

setStyles() {
  let styles = {
    // CSS Property Name
    'font-style':  this.canSave      ? 'italic' : 'normal',  // italic
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',  // normal
    'font-size':   this.isSpecial    ? '24px'   : '8px',     // 24px
  };
  return styles;
}

By adding a NgStyle property binding, let it call the setStyles and style the element accordingly

<div [ngStyle]="setStyles()">
    The style of this div is italic, normal weight, and extra large (24px).
</div>

NgIf

By putting NgIf directive binds to a truth expression that adds an element and its child elements to the DOM in the tree.

<div\*ngIf="currentUser">Hello,{{currentUser.firstName}}</div>

Instead, binding to a false value expression will start from the DOM removes the element and its child elements from the tree. Such as:

<!-- Because the value of isActive is false, User Detail is not in the DOM tree-->
<user-detail *ngIf="isActive"></user-detail>

NgSwitch

When you need to display one of them conditionally from a set of possible element trees, you need NgSwitch . Angular will add only the selected elements to the DOM . Such as:

<span [ngSwitch]="userName">
  <span *ngSwitchCase="'Zhang San'">Zhang San</span>
  <span *ngSwitchCase="'Li Si'">Li Si</span>
  <span *ngSwitchCase="'Wang Wu'">Wang Wu</span>
  <span *ngSwitchCase="'Zhao Liu'">Zhao Liu</span>
  <span *ngSwitchDefault>Longda</span>
</span>

As a parent instruction NgSwitch bind to an expression that returns a switch value, which in this case is a string, but it can be any type of value. Parent instruction NgSwitch control a group <span> child elements. Every one of them. <span> is either hung on an expression that matches the value, or is marked as the default. At any time, these span at most one of the will appear in DOM. If this span the matching value is equal to the switch value, and Angular2 takes this <span> add to DOM. If there are no span on the match, Angular2 willset the default span add to DOM. Angular2 removes and destroys all other span .

Three directives for mutual cooperation:

• ngSwitch :Bind to an expression that returns a switch value

• ngSwitchCase :Bind to an expression that returns a matching value

• ngSwitchDefault attribute used to mark the default element Note: don’t ngSwitch pre-use * instead, you should bind with properties, but ngSwitchCase and ngSwitchDefault to put it in the front. * .

NgFor

This directive is required when you need to display a list of multiple items. As in the following example, it is applied to a HTML block NgFor .

<div\*ngFor="let user of users">{{user.fullName}}</div>

NgFor can also be applied to a component element, such as:

<user-detail\*ngFor="let user of users"[user]="user"></user-detail>

ngFor directive supports an optional index the index grows from 0 to the length of the array during the iteration.

You can capture this by entering variables from the template index and apply it to the template The following example puts index captured a man named i in the variable.

<div *ngFor="let user of users; let i=index">{{i + 1}} - {{user.fullName}}</div>

NgForTrackBy

ngFor instructions sometimes perform poorly, especially in large lists. A small change, removal, or addition to an entry can lead to cascading DOM operation.

For example, when the address book is refreshed from the server, the refreshed list may contain many, if not all, previously displayed contacts. But in Angular’s view, it doesn’t know what has existed before, and can onlyclean up the old list and discard those. DOM element and use the new DOM element to recreate a new list.

To solve this problem, you can avoid this hassle by tracking functions. The tracking function tells Angular: we know that two have the same ``user.id``is with the same contact. Such as:

trackByUsers(index: number, user: User){return user.id}

Then, put NgForTrackBy the instruction is set to that tracking function:

<div *ngFor="let user of users; trackBy:trackByUsers">({{user.id}}) {{user.fullName}}</div>

The tracking function does not exclude all DOM change. If the attribute used to determine whether it is the same contact has changed, it will be updated DOM element, otherwise it will leave this. DOM element. The list interface becomes smoother and more responsive.