Learn angular2 components in the template html syntax-related content, we made some summary
See https://www.angular.cn/guide/template-syntax#binding-syntax-an-overview
First, to extend HTML vocabulary template by components and instructions. They looked like new elements and attributes.
Second, the template expression
the expression evaluates angular into a string. Expression context can be: template input variable (let a), the template reference variables (#), and assembly members
Third, the template statement
(Click) = "add (a)", for event binding. Context is typically the method of assembly, but may be a variable template, and template input variable reference variable
Fourth, the binding syntax overview
Binding type can be divided into three categories according to the direction of data flow: from the data source to the view, the view from a data source and a bidirectional data source from view to view then.
Template binding works by DOM property and events, rather than HTML attribute, the angular data binding in never consider only property dom (except for some special cases, in the absence of property bindable, use attribute binding : [arr.attribute], because the property and the corresponding attribute is not necessarily):
attribute initialization DOM property, then their mission is complete. Property values may vary; the attribute value can not be changed. For example, when the browser rendering <input type = "text" value = "Bob">, it creates the corresponding DOM node, its value this property is initialized to "Bob". When the user input box "Sally", value DOM element of this property into a "Sally". But the value of this attribute of HTML remains unchanged. If you read the attribute input element, you will find really has not changed: input.getAttribute ( 'value') // returns "Bob".
Binding target: It is strongly recommended to see the introduction official document: Components and Templates - template syntax
Binding binding target by Category: Properties (property) binding, attribute binding, css binding, style bindings, event binding, two-way data binding,
Fifth, the built-in command
Structural properties and commands into instructions
Built common attribute command: NgClass, NgStyle, NgModel, primarily change the properties
Built Structure common type instruction: NgForOf, NgIf, mainly to change the structure of dom
Six, calls between the input and output attributes satisfy component
@Input want to bind a component of another form of property, the property must be a defined input
@Output generally used to transfer events between components of the binding EventEmitter
Input or output data from flow considerations on the line, is to enter the property, so the event is spread is output
Seven template expression operators
| And?