1. Description
Angular2 template is used to display the appearance of components. Its usage is basically the same as the html syntax. The simplest Angular2 template is a piece of html code. The Angular template syntax mainly includes the following parts:
l Direct binding
l Interpolation expression
l Attribute binding
l Event binding
l Two-way binding
l Style binding
l templates and *
l Local variables
First, let’s take a look at an example of a template, as shown below:
import { Component, OnInit } from '@angular/core';@Component({selector: 'ui-demo',template: ` <form role="form"><div><legend>title</legend></div><span>attention: {{msg}}</span><div><div>name</div><input type="text" id="name" name="name" [attr.size]="size" [placeholder]="name"></div><div><div>age</div><input type="text" (change)="change()" id="age" name="age" [placeholder]="age"></div><div><div>sex</div><input type="text" [(ngModel)]="sex" id="sex" name="sex" [placeholder]="sex"></div><div *ng-if="needpwd"><div>pwd</div><input #inPwd type="password" [(ngModel)]="pwd" id="pwd" name="pwd"><button type="button" (click)="show(inPwd.value)">warn</button></div><div><div [style.color]="color"><button type="submit" [class.btn-primary]="isPrimary">Submit</button></div></div></form>`})export class TemplateDemoComponent implements OnInit {msg: string = "Precautions";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 attribute, for example, bind the string form to the title attribute
<legend>title</legend>
1.2 Interpolation expression
The interpolation expression is expressed in the form of {{}}, and the values of the corresponding expression in the component are bound to the template for display. For example, the values of the msg expression are displayed in the component as follows.
<span>attention: {{msg}}</span>1.3 Attribute binding
Attribute binding is expressed in the form of [], binding the value of the expression to the corresponding attribute, for example, binding the name expression value in the component to the property placeholder
<div><div>name</div><input type="text" id="name" name="name" [placeholder]="name"></div>
When there is a corresponding attribute in the element bound to the attribute, [xx] can be used to bind directly. However, when there is no corresponding attribute on the element, [attr.xxx] must be used to add a point to bind the corresponding attribute information.
<div><div>name</div><input type="text" id="name" name="name" [attr.size]="size" [placeholder]="name"></div>
1.4 Style binding
Style binding mainly includes two convenient, inline style style and external style class binding.
1.4.1 Style binding
Style binding is syntactically similar to property binding. However, the part in the square brackets is not the attribute name of an element, but includes a style prefix followed by a dot (.), and then the attribute name of the CSS style. Indicates that the property is used on the specified element, as shown in: [style.style-perporty]. For example
<div><div [style.color]="color"><button type="submit" [class.btn-primary]="isPrimary">Submit</button></div></div>
1.4.2 Class binding
CSS class binding is syntactically similar to property binding. However, the part in the square brackets is not the attribute name of an element, but includes a class prefix followed by a dot (.), and then composed of the name of the CSS class, as shown in: [class.class-name]. Indicates whether to use the css class on this element or remove the css class. If the following value is true, the table will be used. False means to remove it.
<div><div [style.color]="color"><button type="submit" [class.btn-primary]="isPrimary">Submit</button></div></div>
1.5 * with <template>
First, let's take a look at an example of * and <template>.
<div *ng-if="needpwd"><div>pwd</div><input type="password" [(ngModel)]="pwd" id="pwd" name="pwd"></div>
* is a syntax sugar that makes it easier to read and write instructions that require templates to modify HTML layouts. NgFor, NgIf, and NgSwitch all add or remove element subtrees that are wrapped in the <template> tag. Use the * prefix syntax to ignore the <template> tag, the restored code is as follows
<template [ngIf]="needpwd"><div><div>pwd</div><input type="password" [(ngModel)]="pwd" id="pwd" name="pwd"></div></template>
1.6 Local variables
Local variables are represented in the form of #xxx. If you use this expression on an element, xxx can be used to represent the element. Local variables can be used in the same element, sibling element or any child element. As shown below, you can use this variable to represent the element in a sibling node
<div *ng-if="needpwd"><div>pwd</div><input #inPwd type="password" [(ngModel)]="pwd" id="pwd" name="pwd"><button type="button" (click)="show(inPwd.value)">warn</button></div>
1.7 Event binding
Attribute binding is expressed in the form of () and binds the component's method to the corresponding event. For example, binds the change function to the change event, and the change function will be triggered when the change event occurs.
<div><div>age</div><input type="text" (change)="change()" id="age" name="age" [placeholder]="age"></div>
1.8 Two-way binding
Bidirectional binding uses the [()] method to represent that two-way binding is a combination of attribute binding and event binding. The most commonly used two-way binding is to use [(ngModel)]=”xxx” in the form. When modifying the data in the form, the bound data items will be modified. As shown below: When the form is input to modify, the sex variable will also be modified synchronously
<div><div>sex</div><input type="text" [(ngModel)]="sex" id="sex" name="sex" [placeholder]="sex"></div>
The above is the relevant knowledge of Angular2 template grammar introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message. The editor will reply you in time. Thank you very much for your support to the Wulin Network website!