-- Learn not just technology, but also dreams! Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmark Angular2 Tutorial Angular 2 Tutorial Angular 2 JavaScript Angular 2 TypeScript Angular 2 Architecture Angular 2 Data Display Angular 2 User Input Angular 2 Forms Angular 2 Template Syntax Angular 2 Forms Angular 2 Template Syntax In the previous chapters we have already covered Angular's templates, in this article we will specifically introduce Angular's syntax usage. Templates play the role of a view, simply put, it's the part displayed to users. HTML Interpolation Template Expressions Template Statements Binding Syntax Property Binding HTML Attribute, Class and Style Bindings Event Binding Two-way Data Binding with NgModel Built-in Directives * and Template Reference Variables Input and Output Properties Template Expression Operators HTML HTML is the "language" of Angular templates. Except for the element which is disabled, all other HTML elements are supported, for example:

My First Angular Application

Interpolation The syntax format for interpolation is: {{ ... }}. Interpolation can insert calculated strings into HTML, and can also be used as attribute values.

Template Expressions {{ ... }} actually contains a template expression, which Angular evaluates and converts to string output. The following example is adding two numbers:

The sum of 1 + 1 is {{1 + 1}}

We can use getVal() to get the value of this expression:

Template expressions are similar to JavaScript, many JavaScript expressions are also valid template expressions, but not all. The following JavaScript expressions are prohibited: Assignment expressions (=, +=, -=...) new operator Concatenation expressions with ; or ' Increment and decrement operators (++ and --) Other things different from JavaScript syntax that are worth noting: Bitwise operators (| and &) are not supported Template expression operators like | and ?. have been given new meanings Property Binding Property binding in templates can set view element properties to template expression values. The most common property binding is setting an element's property to the value of a component property. In the following example, the image element's src property will be bound to the component's imageUrl property: Disable a button when the component is unchanged: Set directive properties:

bound to classes property

Set a custom component's property (this is an important way for parent-child component communication): HTML Attribute, Class and Style Bindings Template syntax provides dedicated one-way data binding forms for scenarios where property binding is not suitable. Attribute Binding When an element has no property to bind, use HTML attribute binding. Consider ARIA, SVG, and table colspan/rowspan attributes. They are pure attributes. They have no corresponding properties to bind. The following example will error: Three-Four We will get this error: Template parse errors: Can't bind to 'colspan' since it isn't a known native property Template parse error: cannot bind to 'colspan' because it is not a known native property As the hint says, the element has no colspan property. But interpolation and property binding can only set properties, not attributes, so HTML attribute binding is needed to create and bind similar attributes. HTML attribute binding syntax is similar to property binding, but the part in brackets is not an element's property name, but consists of an attr. prefix followed by the HTML attribute name, then set the HTML attribute value through an expression that evaluates to a string. For example:

One-Two
Five	Six

CSS Class Binding With CSS class binding, we

YouTip

Angularjs2 Template Syntax

My First Angular Application

{{title}}

📂 Categories