In depth understanding of Angular2 template syntax

1. Description

The Angular2 template is used to show the look and feel of the component as a view. The usage and html syntax are basically the same. The simplest Angular2 template is a piece of html code. Angular template syntax mainly includes the following parts:

l direct binding

l interpolation expression

l property binding

l event binding

l bidirectional binding

l style binding

l Templates and *

l local variable

First, let's look at a template example, as follows:

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'ui-demo',
template: ` <form class="form-horizontal" role="form">
<div class="form-group">
<legend title="form">title</legend>
</div>
<span class="label label-warning">attention : {{msg}}</span>
<div class="input-group">
<div class="input-group-addon">name</div>
<input type="text" class="form-control" id="name" name="name" [attr.size]="size" [placeholder]="name">
</div>
<div class="input-group">
<div class="input-group-addon">age</div>
<input type="text" class="form-control" (change)="change()" id="age" name="age" [placeholder]="age">
</div>
<div class="input-group">
<div class="input-group-addon">sex</div>
<input type="text" class="form-control" [(ngModel)]="sex" id="sex" name="sex" [placeholder]="sex">
</div>
<div class="input-group" *ng-if="needpwd">
<div class="input-group-addon">pwd</div>
<input #inPwd type="password" class="form-control" [(ngModel)]="pwd" id="pwd" name="pwd">
<button type="button" class="btn btn-warning" (click)="show(inPwd.value)">warn</button>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2" [style.color]="color">
<button type="submit" class="btn btn-primary" [class.btn-primary]="isPrimary">Submit</button>
</div>
</div>
</form>`
})
export class TemplateDemoComponent implements OnInit {
msg: string = " Matters needing attention ";
name: string = "name";
size: number = 4;
age: number = 15;
sex: string = 'male';
needpwd: boolean = true;
pwd: string = '';
color: string = "red";
isPrimary: boolean = true;
constructor() { }
ngOnInit() { }
change() {
}
show($event) {
console.log($event);
}
}

1.1 Direct binding

Bind the string directly to the corresponding property, for example, bind the string form to the title property

<legend title="form">title</legend>

1.2 Interpolation expression

The interpolation expression is expressed in the way of {{}}, and the value of the corresponding expression in the component is bound to the template for display, for example, the value of msg expression is displayed in the component as follows

<span class="label label-warning">attention : {{msg}}</span>

1.3 Property binding

Attribute binding is represented by [], which binds the value of the expression to the corresponding attribute, for example, binding the value of the name expression in the component to the attribute placeholder

<div class="input-group">
<div class="input-group-addon">name</div>
<input type="text" class="form-control" id="name" name="name" [placeholder]="name">
</div>

When there are corresponding attributes in the element bound by attributes, [xx] can be directly used for binding. However, when there is no corresponding attribute on the element, [attr. xxx] must be used for binding the corresponding attribute information by adding 1 point to atrr.

<div class="input-group">
<div class="input-group-addon">name</div>
<input type="text" class="form-control" id="name" name="name" [attr.size]="size" [placeholder]="name">
</div>

1.4 Style binding

Style bindings mainly include two convenient, inline style style and external style class bindings.

1.4. 1 Style binding

style bindings are syntactically similar to property bindings. But instead of the attribute name of an element, the part in square brackets includes an style prefix, followed by a dot (.), followed by an CSS-style attribute name. Indicates that the attribute is used on the specified element, as [style. style-perporty]. For example

<div class="form-group">
<div class="col-sm-10 col-sm-offset-2" [style.color]="color">
<button type="submit" class="btn btn-primary" [class.btn-primary]="isPrimary">Submit</button>
</div>
</div>

1.4. 2 Class binding

CSS class bindings are syntactically similar to property bindings. However, instead of the attribute name of an element, the part in square brackets includes an class prefix, followed by a dot (.), followed by the name of the CSS class, as follows: [class. class-name]. Indicates whether the css class is used on the element or whether the css class is removed. If the following value is true, the table will use it, and false means removing it

<div class="form-group">
<div class="col-sm-10 col-sm-offset-2" [style.color]="color">
<button type="submit" class="btn btn-primary" [class.btn-primary]="isPrimary">Submit</button>
</div>
</div>

1.5 * With < template >

First, let's look at a * and < template > Examples of,

<div class="input-group" *ng-if="needpwd">
<div class="input-group-addon">pwd</div>
<input type="password" class="form-control" [(ngModel)]="pwd" id="pwd" name="pwd">
</div>

* is a syntax sugar that makes instructions that require templates to modify the layout of HTML easier to read and write. NgFor, NgIf, and NgSwitch all add or remove element subtrees that are wrapped in < template > In the label. Using * prefix syntax makes us ignore < template > Label, the restored code is as follows

<template [ngIf]="needpwd">
<div class="input-group">
<div class="input-group-addon">pwd</div>
<input type="password" class="form-control" [(ngModel)]="pwd" id="pwd" name="pwd">
</div>
</template>

1.6 Local variables

Local variables are represented by # xxx, or xxx if you use this expression on an element, or you can use local variables in the same 1 element, sibling element, or any child element. You can use this variable on a sibling node to represent the element, as shown below

<div class="input-group" *ng-if="needpwd">
<div class="input-group-addon">pwd</div>
<input #inPwd type="password" class="form-control" [(ngModel)]="pwd" id="pwd" name="pwd">
<button type="button" class="btn btn-warning" (click)="show(inPwd.value)">warn</button>
</div>

1.7 Event binding

Attribute binding is represented by (), which binds the component's method to the corresponding event. For example, binding the change function to the change event will trigger the change function when the change event occurs.

<legend title="form">title</legend>

0

1.8 Bidirectional binding

Bidirectional binding is represented by [()], which is a combination of attribute binding and event binding. The most commonly used bidirectional binding is used in a form with [(ngModel)] = "xxx". When you modify the data in the form, the bound data item is modified. Here's how: When the form input is modified, the sex variable is modified simultaneously

<legend title="form">title</legend>

1