Components & Templates Flashcards
Describe Interpolation
{{ … }}
Whats component/template duality does Angular support?
Template View
Controller Viewmodel
What is a Template expression?
A template expression produces a value. Angular executes the expression and assigns it to a property of a binding target; the target might be a an HTML element, a component, or a directive.
Are template expressions Javascript?
No, but they are similar.
What is prohibited in template expressions?
assignments (=, +=, -=, …)
new
chaining expressions with ; or ,
increment and decrement operators (++ and –)
no suppor for bitwise operators | and &
new template expression operators, such as |, ?., and !
Expression Guidelines
No visible side effects
Quick execution
Simplicity
Idempotence
Describe Template statement
Delete Hero
A template statement responding to an event raised by a binding target such as an element, component , or directive.
Are template statements equal to template statements?
No
What is allowed and not allowed in template statements?
Allowed:
Basic assignment =
Chaining expressions ; or ,
Not Allowed: new increment and decrement operators ++ and -- operator assignment, such as += and -= the bitwise operators | and & the template expression operators
What data binding directions are there?
source-to-view (one way)
view-to-source (one way)
view-to-source-to-view (two way)
Syntax and type for source-to-view data bindings
Syntax:
{{expression}}
[target]=”expression”
bind-target=”expression”
Type: Interpolation Property Attribute Class Style
Syntax and type for view-to-source data bindings
Syntax:
(target)=”statement”
on-target=”statement”
Type:
Event
Syntax and type for view-to-source-to-view data bindings
Syntax:
[(target)]=”expressions”
bindon-target=”expression”
When do you use attribute binding?
You must use attribute binding when there is no element property to bind.
Give an example of an attribute binding!
Hello World!
Give an example of class binding!
<div>{{var}}</div>
Give an example of style binding!
<div>{{colorVar}}</div>
Give an example of an event binding!
Save
