Data Binding, Reactive, Pipes

Data binding The default data binding in angular4 is one-way. Can be divided into: Interpolation expression form (Dom property binding)

{{test}}

Dom property binding process: A property is defined in the controller, and the value of the corresponding dom is attached when the value changes The changed value will also appear on the page after rendering. All operations have nothing to do with the html attribute. The html attribute is bound, using square brackets < img [ src ]=" imgUrl "/> //If there is no By writing this square bracket, angular will assign the value on the right side of the property as a string, instead of an all-or-nothing form of non-expression basic Html property binding CSS property binding.

data binding, reactive, pipes

Data binding.The default data binding in angular4 is one-way. It can be divided into:
Interpolation expression form (Dom property binding)
1.A property is defined in the controller and the value has changed
2.corresponding dom is attached with the changed value
3.The value just now also appears on the rendered page
4.All these operations have nothing to do with html attributes

data binding, reactive, pipes.HTML attribute binding, use square brackets


•Basic Html property binding
•CSS property binding
•This form is all-or-nothing.
• < div [ class ] = " classA classB classC " > < / div >
•A, B style is fixed, C decides whether to display with boolean true or false
• < div class = " classA classB " [ class.classC ]= "a boolean value" >
•controlled by different boolean
•< div [ ngClass ]= " divClass " >


•divClass :{
• classA : true,
• classB : false,
• classC : true
}
•style binding
•style all-and-nothing specified
< div [ style.color ]= "a boolean value" >
•Multiple properties controlled by different boolean
•< div [ ngStyle ]= " divStyle " >


•divStyle :{
•color: red,
•color-size: 3px
}
Tips: The difference between Dom attribute and Html attribute
The Dom property changes as the value changes. The Html attribute is the value you specify at the beginning, and the value you get later is the same.
Template binding is done through Dom binding, not html attribute binding
Event binding using parentheses
< button ( click ) = " clickEvent ($event)" >
two-way binding
Two-way binding itself is actually a combination of property binding and event binding. Property binding is from the control layer to the view layer, and event binding is from the view layer to the control layer.
< input [( ngModel )] = "test" >


data binding, reactive, pipes.Define element alias


Use # to define an alias, no need to add # when using it
< input # testInput ( input ) = inputEvent ( testInput.value ) >
reactive programming
rxjs is mainly used to implement reactive programming.
Reactive programming is actually an extension of the observer pattern. The roles can be divided into:
•object ( Observable ) Represents a collection of values or events
•Observer (Observer) A collection of callback functions, he knows how to listen to the value sent by the Observable
Everything can be streamed
pipeline
A pipe is a method of converting a raw value into the desired format, separated by the "|" symbol, mainly used for interpolation expressions.
The pipeline can be like a chain, with multiple pipelines connected
Commonly used pipes can be divided into:
•date accepts parameters, such as date:' yyyy -MM-dd HH: mm:ss '
•number accepts parameters, for example: number:'2.2-2'
•uppercase
•lowercase
•async handles asynchronous streams
The pipeline can also be defined by itself. Where it needs to be used, it only needs to be added to the declations .
Introduction: Data binding The default data binding in angular4 is one-way. Can be divided into: Interpolation expression form (Dom property binding)

{{test}}

Dom property binding process: A property is defined in the controller, and the value of the corresponding dom is attached when the value changes The changed value will also appear on the page after rendering. All operations have nothing to do with the html attribute. The html attribute is bound, using square brackets < img [ src ]=" imgUrl "/> //If there is no By writing this square bracket, angular will assign the value on the right side of the property as a string, instead of an all-or-nothing form of non-expression basic Html property binding CSS property binding.
data binding
The default data binding in angular4 is one-way. It can be divided into:
Interpolation expression form (Dom property binding)
< p > {{test }} < p >
Dom property binding process:
1.A property is defined in the controller and the value has changed
2.corresponding dom is attached with the changed value
3.The value just now also appears on the rendered page
4.All these operations have nothing to do with html attributes
html attribute binding, use square brackets
< img [ src ]= " imgUrl " />
//If this square bracket is not written, angular will assign the value on the right side of the property as a string instead of an expression
•Basic Html property binding

•CSS property binding
•This form is all-or-nothing.
• < div [ class ] = " classA classB classC " > < / div >
•A, B style is fixed, C decides whether to display with boolean true or false
• < div class = " classA classB " [ class.classC ]= "a boolean value" >
•controlled by different boolean
•< div [ ngClass ]= " divClass " >


•divClass :{
• classA : true,
• classB : false,
• classC : true
}
•style binding
•style all-and-nothing specified
< div [ style.color ]= "a boolean value" >
•Multiple properties controlled by different boolean
•< div [ ngStyle ]= " divStyle " >


•divStyle :{
•color: red,
•color-size: 3px
}
Tips: The difference between Dom attribute and Html attribute
The Dom property changes as the value changes. The Html attribute is the value you specify at the beginning, and the value you get later is the same.
Template binding is done through Dom binding, not html attribute binding
Event binding using parentheses
< button ( click ) = " clickEvent ($event)" >
two-way binding
Two-way binding itself is actually a combination of property binding and event binding. Property binding is from the control layer to the view layer, and event binding is from the view layer to the control layer.
< input [( ngModel )] = "test" >

Define element alias
Use # to define an alias, no need to add # when using it
< input # testInput ( input ) = inputEvent ( testInput.value ) >
reactive programming
rxjs is mainly used to implement reactive programming.
Reactive programming is actually an extension of the observer pattern. The roles can be divided into:
•object ( Observable ) Represents a collection of values or events
•Observer (Observer) A collection of callback functions, he knows how to listen to the value sent by the Observable
Everything can be streamed
pipeline
A pipe is a method of converting a raw value into the desired format, separated by the "|" symbol, mainly used for interpolation expressions.
The pipeline can be like a chain, with multiple pipelines connected
Commonly used pipes can be divided into:
•date accepts parameters, such as date:' yyyy -MM-dd HH: mm:ss '
•number accepts parameters, for example: number:'2.2-2'
•uppercase
•lowercase
•async handles asynchronous streams
The pipeline can also be defined by itself. Where it needs to be used, it only needs to be added to the declations .