// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`attr-name.component.html 1`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`attr-name.component.html 2`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 80
trailingComma: "es5"
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`attr-name.component.html 3`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 1
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`attr-name.component.html 4`] = `
====================================options=====================================
htmlWhitespaceSensitivity: "ignore"
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`attr-name.component.html 5`] = `
====================================options=====================================
bracketSpacing: false
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`attributes.component.html 1`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`attributes.component.html 2`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 80
trailingComma: "es5"
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`attributes.component.html 3`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 1
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`attributes.component.html 4`] = `
====================================options=====================================
htmlWhitespaceSensitivity: "ignore"
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`attributes.component.html 5`] = `
====================================options=====================================
bracketSpacing: false
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`first-lf.component.html 1`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`first-lf.component.html 2`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 80
trailingComma: "es5"
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`first-lf.component.html 3`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 1
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`first-lf.component.html 4`] = `
====================================options=====================================
htmlWhitespaceSensitivity: "ignore"
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`first-lf.component.html 5`] = `
====================================options=====================================
bracketSpacing: false
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`ignore-attribute.component.html 1`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`ignore-attribute.component.html 2`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 80
trailingComma: "es5"
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`ignore-attribute.component.html 3`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 1
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`ignore-attribute.component.html 4`] = `
====================================options=====================================
htmlWhitespaceSensitivity: "ignore"
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`ignore-attribute.component.html 5`] = `
====================================options=====================================
bracketSpacing: false
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`interpolation.component.html 1`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
{{ a | b : c }}
{{ a | pipe }}
{{ 0 - 1 }}
{{ - 1 }}
{{ a ? 1 : 2 }}
{{ a ( 1 ) ( 2 ) }}
{{ a [ b ] }}
{{ [ 1 ] }}
{{ { 'a' : 1 } }}
{{ { a : 1 } }}
{{ true }}
{{ undefined }}
{{ null }}
{{ ( 1 ) }}
{{ 1 }}
{{ 'hello' }}
{{ a ( 1 , 2 ) }}
{{ a . b ( 1 , 2 ) }}
{{ x ! }}
{{ ! x }}
{{ ( ( a ) ) }}
{{ a }}
{{ a // hello }}
{{ a . b }}
{{ a ?. b ( ) }}
{{ a ?. b }}
{{ a // hello }}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{copyTypes[options.copyType]}}
{{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
{{a}} {{b}}
{{ aNormalValue | aPipe }}:
{{ aReallyReallySuperLongValue | andASuperLongPipeJustToBreakThis }}
{{
'delete'
| translate: {what: ('entities' | translate: {count: array.length})}
}}
{{ {a:1+{} } }}
{{ {a:a==={} } }}
{{ {a:!{} } }}
{{ {a:a?b:{} } }}
=====================================output=====================================
{{ a | b: c }}
{{ a | pipe }}
{{ 0 - 1 }}
{{ -1 }}
{{ a ? 1 : 2 }}
{{ a(1)(2) }}
{{ a[b] }}
{{ [1] }}
{{ { a: 1 } }}
{{ { a: 1 } }}
{{ true }}
{{ undefined }}
{{ null }}
{{ 1 }}
{{ 1 }}
{{ "hello" }}
{{ a(1, 2) }}
{{ a.b(1, 2) }}
{{ x! }}
{{ !x }}
{{ a }}
{{ a }}
{{ a // hello }}
{{ a.b }}
{{ a?.b() }}
{{ a?.b }}
{{ a // hello }}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{ copyTypes[options.copyType] }}
{{
listRow.NextScheduledSendStatus == 1 ||
listRow.NextScheduledSendStatus == 2 ||
listRow.NextScheduledSendStatus == 3
}}
{{ a }} {{ b }}
{{ aNormalValue | aPipe }}:
{{
aReallyReallySuperLongValue | andASuperLongPipeJustToBreakThis
}}
{{
"delete"
| translate: { what: "entities" | translate: { count: array.length } }
}}
{{ { a: 1 + {} } }}
{{ { a: a === {} } }}
{{ { a: !{} } }}
{{ { a: a ? b : {} } }}
================================================================================
`;
exports[`interpolation.component.html 2`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 80
trailingComma: "es5"
| printWidth
=====================================input======================================
{{ a | b : c }}
{{ a | pipe }}
{{ 0 - 1 }}
{{ - 1 }}
{{ a ? 1 : 2 }}
{{ a ( 1 ) ( 2 ) }}
{{ a [ b ] }}
{{ [ 1 ] }}
{{ { 'a' : 1 } }}
{{ { a : 1 } }}
{{ true }}
{{ undefined }}
{{ null }}
{{ ( 1 ) }}
{{ 1 }}
{{ 'hello' }}
{{ a ( 1 , 2 ) }}
{{ a . b ( 1 , 2 ) }}
{{ x ! }}
{{ ! x }}
{{ ( ( a ) ) }}
{{ a }}
{{ a // hello }}
{{ a . b }}
{{ a ?. b ( ) }}
{{ a ?. b }}
{{ a // hello }}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{copyTypes[options.copyType]}}
{{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
{{a}} {{b}}
{{ aNormalValue | aPipe }}:
{{ aReallyReallySuperLongValue | andASuperLongPipeJustToBreakThis }}
{{
'delete'
| translate: {what: ('entities' | translate: {count: array.length})}
}}
{{ {a:1+{} } }}
{{ {a:a==={} } }}
{{ {a:!{} } }}
{{ {a:a?b:{} } }}
=====================================output=====================================
{{ a | b: c }}
{{ a | pipe }}
{{ 0 - 1 }}
{{ -1 }}
{{ a ? 1 : 2 }}
{{ a(1)(2) }}
{{ a[b] }}
{{ [1] }}
{{ { a: 1 } }}
{{ { a: 1 } }}
{{ true }}
{{ undefined }}
{{ null }}
{{ 1 }}
{{ 1 }}
{{ "hello" }}
{{ a(1, 2) }}
{{ a.b(1, 2) }}
{{ x! }}
{{ !x }}
{{ a }}
{{ a }}
{{ a // hello }}
{{ a.b }}
{{ a?.b() }}
{{ a?.b }}
{{ a // hello }}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{ copyTypes[options.copyType] }}
{{
listRow.NextScheduledSendStatus == 1 ||
listRow.NextScheduledSendStatus == 2 ||
listRow.NextScheduledSendStatus == 3
}}
{{ a }} {{ b }}
{{ aNormalValue | aPipe }}:
{{
aReallyReallySuperLongValue | andASuperLongPipeJustToBreakThis
}}
{{
"delete"
| translate: { what: "entities" | translate: { count: array.length } }
}}
{{ { a: 1 + {} } }}
{{ { a: a === {} } }}
{{ { a: !{} } }}
{{ { a: a ? b : {} } }}
================================================================================
`;
exports[`interpolation.component.html 3`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 1
| printWidth
=====================================input======================================
{{ a | b : c }}
{{ a | pipe }}
{{ 0 - 1 }}
{{ - 1 }}
{{ a ? 1 : 2 }}
{{ a ( 1 ) ( 2 ) }}
{{ a [ b ] }}
{{ [ 1 ] }}
{{ { 'a' : 1 } }}
{{ { a : 1 } }}
{{ true }}
{{ undefined }}
{{ null }}
{{ ( 1 ) }}
{{ 1 }}
{{ 'hello' }}
{{ a ( 1 , 2 ) }}
{{ a . b ( 1 , 2 ) }}
{{ x ! }}
{{ ! x }}
{{ ( ( a ) ) }}
{{ a }}
{{ a // hello }}
{{ a . b }}
{{ a ?. b ( ) }}
{{ a ?. b }}
{{ a // hello }}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{copyTypes[options.copyType]}}
{{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
{{a}} {{b}}
{{ aNormalValue | aPipe }}:
{{ aReallyReallySuperLongValue | andASuperLongPipeJustToBreakThis }}
{{
'delete'
| translate: {what: ('entities' | translate: {count: array.length})}
}}
{{ {a:1+{} } }}
{{ {a:a==={} } }}
{{ {a:!{} } }}
{{ {a:a?b:{} } }}
=====================================output=====================================
{{
a
| b
: c
}}
{{
a
| pipe
}}
{{
0 -
1
}}
{{
-1
}}
{{
a
? 1
: 2
}}
{{
a(
1
)(
2
)
}}
{{
a[
b
]
}}
{{
[
1
]
}}
{{
{
a: 1
}
}}
{{
{
a: 1
}
}}
{{
true
}}
{{
undefined
}}
{{
null
}}
{{
1
}}
{{
1
}}
{{
"hello"
}}
{{
a(
1,
2
)
}}
{{
a.b(
1,
2
)
}}
{{
x!
}}
{{
!x
}}
{{
a
}}
{{
a
}}
{{
a // hello
}}
{{
a.b
}}
{{
a?.b()
}}
{{
a?.b
}}
{{
a // hello
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize
: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize
: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize
: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize
: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize
: localizationSection
}}
{{
copyTypes[
options
.copyType
]
}}
{{
listRow.NextScheduledSendStatus ==
1 ||
listRow.NextScheduledSendStatus ==
2 ||
listRow.NextScheduledSendStatus ==
3
}}
{{
a
}} {{
b
}}
{{
aNormalValue
| aPipe
}}:
{{
aReallyReallySuperLongValue
| andASuperLongPipeJustToBreakThis
}}
{{
"delete"
| translate
: {
what:
"entities"
| translate
: {
count:
array.length
}
}
}}
{{
{
a:
1 +
{}
}
}}
{{
{
a:
a ===
{}
}
}}
{{
{
a: !{}
}
}}
{{
{
a: a
? b
: {}
}
}}
================================================================================
`;
exports[`interpolation.component.html 4`] = `
====================================options=====================================
htmlWhitespaceSensitivity: "ignore"
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
{{ a | b : c }}
{{ a | pipe }}
{{ 0 - 1 }}
{{ - 1 }}
{{ a ? 1 : 2 }}
{{ a ( 1 ) ( 2 ) }}
{{ a [ b ] }}
{{ [ 1 ] }}
{{ { 'a' : 1 } }}
{{ { a : 1 } }}
{{ true }}
{{ undefined }}
{{ null }}
{{ ( 1 ) }}
{{ 1 }}
{{ 'hello' }}
{{ a ( 1 , 2 ) }}
{{ a . b ( 1 , 2 ) }}
{{ x ! }}
{{ ! x }}
{{ ( ( a ) ) }}
{{ a }}
{{ a // hello }}
{{ a . b }}
{{ a ?. b ( ) }}
{{ a ?. b }}
{{ a // hello }}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{copyTypes[options.copyType]}}
{{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
{{a}} {{b}}
{{ aNormalValue | aPipe }}:
{{ aReallyReallySuperLongValue | andASuperLongPipeJustToBreakThis }}
{{
'delete'
| translate: {what: ('entities' | translate: {count: array.length})}
}}
{{ {a:1+{} } }}
{{ {a:a==={} } }}
{{ {a:!{} } }}
{{ {a:a?b:{} } }}
=====================================output=====================================
{{ a | b: c }}
{{ a | pipe }}
{{ 0 - 1 }}
{{ -1 }}
{{ a ? 1 : 2 }}
{{ a(1)(2) }}
{{ a[b] }}
{{ [1] }}
{{ { a: 1 } }}
{{ { a: 1 } }}
{{ true }}
{{ undefined }}
{{ null }}
{{ 1 }}
{{ 1 }}
{{ "hello" }}
{{ a(1, 2) }}
{{ a.b(1, 2) }}
{{ x! }}
{{ !x }}
{{ a }}
{{ a }}
{{ a // hello }}
{{ a.b }}
{{ a?.b() }}
{{ a?.b }}
{{ a // hello }}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{ copyTypes[options.copyType] }}
{{
listRow.NextScheduledSendStatus == 1 ||
listRow.NextScheduledSendStatus == 2 ||
listRow.NextScheduledSendStatus == 3
}}
{{ a }}
{{ b }}
{{ aNormalValue | aPipe }}:
{{ aReallyReallySuperLongValue | andASuperLongPipeJustToBreakThis }}
{{
"delete"
| translate: { what: "entities" | translate: { count: array.length } }
}}
{{ { a: 1 + {} } }}
{{ { a: a === {} } }}
{{ { a: !{} } }}
{{ { a: a ? b : {} } }}
================================================================================
`;
exports[`interpolation.component.html 5`] = `
====================================options=====================================
bracketSpacing: false
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
{{ a | b : c }}
{{ a | pipe }}
{{ 0 - 1 }}
{{ - 1 }}
{{ a ? 1 : 2 }}
{{ a ( 1 ) ( 2 ) }}
{{ a [ b ] }}
{{ [ 1 ] }}
{{ { 'a' : 1 } }}
{{ { a : 1 } }}
{{ true }}
{{ undefined }}
{{ null }}
{{ ( 1 ) }}
{{ 1 }}
{{ 'hello' }}
{{ a ( 1 , 2 ) }}
{{ a . b ( 1 , 2 ) }}
{{ x ! }}
{{ ! x }}
{{ ( ( a ) ) }}
{{ a }}
{{ a // hello }}
{{ a . b }}
{{ a ?. b ( ) }}
{{ a ?. b }}
{{ a // hello }}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}
{{copyTypes[options.copyType]}}
{{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
{{a}} {{b}}
{{ aNormalValue | aPipe }}:
{{ aReallyReallySuperLongValue | andASuperLongPipeJustToBreakThis }}
{{
'delete'
| translate: {what: ('entities' | translate: {count: array.length})}
}}
{{ {a:1+{} } }}
{{ {a:a==={} } }}
{{ {a:!{} } }}
{{ {a:a?b:{} } }}
=====================================output=====================================
{{ a | b: c }}
{{ a | pipe }}
{{ 0 - 1 }}
{{ -1 }}
{{ a ? 1 : 2 }}
{{ a(1)(2) }}
{{ a[b] }}
{{ [1] }}
{{ {a: 1} }}
{{ {a: 1} }}
{{ true }}
{{ undefined }}
{{ null }}
{{ 1 }}
{{ 1 }}
{{ "hello" }}
{{ a(1, 2) }}
{{ a.b(1, 2) }}
{{ x! }}
{{ !x }}
{{ a }}
{{ a }}
{{ a // hello }}
{{ a.b }}
{{ a?.b() }}
{{ a?.b }}
{{ a // hello }}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{
"SearchSelection.transmissionLayoutRadioButton"
| localize: localizationSection
}}
{{ copyTypes[options.copyType] }}
{{
listRow.NextScheduledSendStatus == 1 ||
listRow.NextScheduledSendStatus == 2 ||
listRow.NextScheduledSendStatus == 3
}}
{{ a }} {{ b }}
{{ aNormalValue | aPipe }}:
{{
aReallyReallySuperLongValue | andASuperLongPipeJustToBreakThis
}}
{{
"delete"
| translate: {what: "entities" | translate: ({count: array.length})}
}}
{{ {a: 1 + ({})} }}
{{ {a: a === ({})} }}
{{ {a: !({})} }}
{{ {a: a ? b : ({})} }}
================================================================================
`;
exports[`real-world.component.html 1`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
Template Syntax
Interpolation
Expression context
Statement context
Mental Model
Buttons
Properties vs. Attributes
Property Binding
Event Binding
Two-way Binding
Directives
Template reference variables
Inputs and outputs
Pipes
Safe navigation operator ?.
Non-null assertion operator !.
Enums
Interpolation
My current hero is {{currentHero.name}}
{{title}}
The sum of 1 + 1 is {{1 + 1}}
The sum of 1 + 1 is not {{1 + 1 + getVal()}}
top
Expression context
Component expression context ({{title}}, [hidden]="isUnchanged")
{{title}}
changed
Template input variable expression context (let hero)
{{hero.name}}
Template reference variable expression context (#heroInput)
Type something:
{{heroInput.value}}
top
Statement context
Component statement context ( (click)="onSave() )
Delete hero
Template $event statement context
Save
Template input variable statement context (let hero)
{{hero.name}}
Template reference variable statement context (#heroForm)
top
New Mental Model
Mental Model
Save
Save
Save
click me
{{clicked}}
Hero Name:
{{name}}
help
Special
button
top
Property vs. Attribute (img examples)
top
Enabled (but does nothing)
Disabled
Still disabled
disabled by attribute
disabled by property binding
Disabled Cancel
Enabled Save
top
Property Binding
Cancel is disabled
[ngClass] binding to the classes property
is the interpolated image.
is the property bound image.
"{{title}}" is the interpolated title.
" " is the property bound title.
"{{evilTitle}}" is the interpolated evil title.
" " is the property bound evil title.
top
Attribute Binding
{{actionName}} with Aria
Disabled
Disabled as well
Enabled (but inert)
top
Class Binding
Bad curly special
Bad curly
The class binding is special
This one is not so special
This class binding is special too
top
Style Binding
Red
Save
Big
Small
top
Event Binding
Save
On Save
click with myClick
{{clickMessage}}
Save, no propagation
Save w/ propagation
top
Two-way Binding
De-sugared two-way binding
top
NgModel (two-way) Binding
Result: {{currentHero.name}}
without NgModel
[(ngModel)]
bindon-ngModel
(ngModelChange)="...name=$event"
(ngModelChange)="setUppercaseName($event)"
top
NgClass Binding
currentClasses is {{currentClasses | json}}
This div is initially saveable, unchanged, and special
saveable |
modified: |
special:
Refresh currentClasses
This div should be {{ canSave ? "": "not"}} saveable,
{{ isUnchanged ? "unchanged" : "modified" }} and,
{{ isSpecial ? "": "not"}} special after clicking "Refresh".
This div is special
Bad curly special
Curly special
top
NgStyle Binding
This div is x-large or smaller.
[ngStyle] binding to currentStyles - CSS property names
currentStyles is {{currentStyles | json}}
This div is initially italic, normal weight, and extra large (24px).
italic: |
normal: |
xlarge:
Refresh currentStyles
This div should be {{ canSave ? "italic": "plain"}},
{{ isUnchanged ? "normal weight" : "bold" }} and,
{{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".
top
NgIf Binding
Hello, {{currentHero.name}}
Hello, {{nullHero.name}}
Add {{currentHero.name}} with template
Hero Detail removed from DOM (via template) because isActive is false
Show with class
Hide with class
Show with style
Hide with style
top
NgFor Binding
top
*ngFor with index
with semi-colon separator
{{i + 1}} - {{hero.name}}
with comma separator
{{i + 1}} - {{hero.name}}
top
*ngFor trackBy
Reset heroes
Change ids
Clear counts
without trackBy
({{hero.id}}) {{hero.name}}
Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
with trackBy
({{hero.id}}) {{hero.name}}
Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
with trackBy and semi-colon separator
({{hero.id}}) {{hero.name}}
with trackBy and comma separator
({{hero.id}}) {{hero.name}}
with trackBy and space separator
({{hero.id}}) {{hero.name}}
with generic trackById function
({{hero.id}}) {{hero.name}}
top
NgSwitch Binding
Pick your favorite hero
{{h.name}}
Are you as confused as {{currentHero.name}}?
top
Template reference variables
Call
Fax
Example Form
top
Save
myClick2
{{clickMessage2}}
top
Pipes
Title through uppercase pipe: {{title | uppercase}}
Title through a pipe chain:
{{title | uppercase | lowercase}}
Birthdate: {{currentHero?.birthdate | date:'longDate'}}
{{currentHero | json}}
Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}
Price: {{product.price | currency:'USD':true}}
top
Safe navigation operator ?.
The title is {{title}}
The current hero's name is {{currentHero?.name}}
The current hero's name is {{currentHero.name}}
The null hero's name is {{nullHero.name}}
The null hero's name is {{nullHero && nullHero.name}}
The null hero's name is {{nullHero?.name}}
top
Non-null assertion operator !.
The hero's name is {{hero!.name}}
top
$any type cast function $any( ) .
The hero's marker is {{$any(hero).marker}}
Undeclared members is {{$any(this).member}}
top
Enums in binding
The name of the Color.Red enum is {{Color[Color.Red]}}.
The current color is {{Color[color]}} and its number is {{color}}.
Enum Toggle
top
=====================================output=====================================
Template Syntax
Interpolation
Expression context
Statement context
Mental Model
Buttons
Properties vs. Attributes
Property Binding
Event Binding
Two-way Binding
Directives
Template reference variables
Inputs and outputs
Pipes
Safe navigation operator ?.
Non-null assertion operator !.
Enums
Interpolation
My current hero is {{ currentHero.name }}
{{ title }}
The sum of 1 + 1 is {{ 1 + 1 }}
The sum of 1 + 1 is not {{ 1 + 1 + getVal() }}
top
Expression context
Component expression context ({{title}},
[hidden]="isUnchanged")
{{ title }}
changed
Template input variable expression context (let hero)
{{ hero.name }}
Template reference variable expression context (#heroInput)
Type something:
{{ heroInput.value }}
top
Statement context
Component statement context ( (click)="onSave() )
Delete hero
Template $event statement context
Save
Template input variable statement context (let hero)
{{ hero.name }}
Template reference variable statement context (#heroForm)
top
New Mental Model
Mental Model
Save
Save
Save
click me
{{ clicked }}
Hero Name:
{{ name }}
help
Special
button
top
Property vs. Attribute (img examples)
top
Enabled (but does nothing)
Disabled
Still disabled
disabled by attribute
disabled by property binding
Disabled Cancel
Enabled Save
top
Property Binding
Cancel is disabled
[ngClass] binding to the classes property
is the interpolated image.
is the property bound image.
"{{ title }}" is the interpolated title.
" " is the property bound title.
"{{ evilTitle }}" is the interpolated evil title.
" " is the property bound evil
title.
top
Attribute Binding
{{ actionName }} with Aria
Disabled
Disabled as well
Enabled (but inert)
top
Class Binding
Bad curly special
Bad curly
The class binding is special
This one is not so special
This class binding is special too
top
Style Binding
Red
Save
Big
Small
top
Event Binding
Save
On Save
click with myClick
{{ clickMessage }}
Save, no propagation
Save w/ propagation
top
Two-way Binding
De-sugared two-way binding
top
NgModel (two-way) Binding
Result: {{ currentHero.name }}
without NgModel
[(ngModel)]
bindon-ngModel
(ngModelChange)="...name=$event"
(ngModelChange)="setUppercaseName($event)"
top
NgClass Binding
currentClasses is {{ currentClasses | json }}
This div is initially saveable, unchanged, and special
saveable |
modified:
|
special:
Refresh currentClasses
This div should be {{ canSave ? "" : "not" }} saveable,
{{ isUnchanged ? "unchanged" : "modified" }} and,
{{ isSpecial ? "" : "not" }} special after clicking "Refresh".
This div is special
Bad curly special
Curly special
top
NgStyle Binding
This div is x-large or smaller.
[ngStyle] binding to currentStyles - CSS property names
currentStyles is {{ currentStyles | json }}
This div is initially italic, normal weight, and extra large (24px).
italic: |
normal: |
xlarge:
Refresh currentStyles
This div should be {{ canSave ? "italic" : "plain" }},
{{ isUnchanged ? "normal weight" : "bold" }} and,
{{ isSpecial ? "extra large" : "normal size" }} after clicking "Refresh".
top
NgIf Binding
Hello, {{ currentHero.name }}
Hello, {{ nullHero.name }}
Add {{ currentHero.name }} with template
Hero Detail removed from DOM (via template) because isActive is false
Show with class
Hide with class
Show with style
Hide with style
top
NgFor Binding
top
*ngFor with index
with semi-colon separator
{{ i + 1 }} - {{ hero.name }}
with comma separator
{{ i + 1 }} - {{ hero.name }}
top
*ngFor trackBy
Reset heroes
Change ids
Clear counts
without trackBy
({{ hero.id }}) {{ hero.name }}
Hero DOM elements change #{{ heroesNoTrackByCount }} without trackBy
with trackBy
({{ hero.id }}) {{ hero.name }}
Hero DOM elements change #{{ heroesWithTrackByCount }} with trackBy
with trackBy and semi-colon separator
({{ hero.id }}) {{ hero.name }}
with trackBy and comma separator
({{ hero.id }}) {{ hero.name }}
with trackBy and space separator
({{ hero.id }}) {{ hero.name }}
with generic trackById function
({{ hero.id }}) {{ hero.name }}
top
NgSwitch Binding
Pick your favorite hero
{{
h.name
}}
Are you as confused as {{ currentHero.name }}?
top
Template reference variables
Call
Fax
Example Form
top
Save
myClick2
{{ clickMessage2 }}
top
Pipes
Title through uppercase pipe: {{ title | uppercase }}
Title through a pipe chain:
{{ title | uppercase | lowercase }}
Birthdate: {{ currentHero?.birthdate | date: "longDate" }}
{{ currentHero | json }}
Birthdate: {{ currentHero?.birthdate | date: "longDate" | uppercase }}
Price: {{ product.price | currency: "USD":true }}
top
Safe navigation operator ?.
The title is {{ title }}
The current hero's name is {{ currentHero?.name }}
The current hero's name is {{ currentHero.name }}
The null hero's name is {{ nullHero.name }}
The null hero's name is {{ nullHero && nullHero.name }}
The null hero's name is {{ nullHero?.name }}
top
Non-null assertion operator !.
The hero's name is {{ hero!.name }}
top
$any type cast function $any( ) .
The hero's marker is {{ $any(hero).marker }}
Undeclared members is {{$any(this).member}}
top
Enums in binding
The name of the Color.Red enum is {{ Color[Color.Red] }}.
The current color is {{ Color[color] }} and its number is {{ color }}.
Enum Toggle
top
================================================================================
`;
exports[`real-world.component.html 2`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 80
trailingComma: "es5"
| printWidth
=====================================input======================================
Template Syntax
Interpolation
Expression context
Statement context
Mental Model
Buttons
Properties vs. Attributes
Property Binding
Event Binding
Two-way Binding
Directives
Template reference variables
Inputs and outputs
Pipes
Safe navigation operator ?.
Non-null assertion operator !.
Enums
Interpolation
My current hero is {{currentHero.name}}
{{title}}
The sum of 1 + 1 is {{1 + 1}}
The sum of 1 + 1 is not {{1 + 1 + getVal()}}
top
Expression context
Component expression context ({{title}}, [hidden]="isUnchanged")
{{title}}
changed
Template input variable expression context (let hero)
{{hero.name}}
Template reference variable expression context (#heroInput)
Type something:
{{heroInput.value}}
top
Statement context
Component statement context ( (click)="onSave() )
Delete hero
Template $event statement context
Save
Template input variable statement context (let hero)
{{hero.name}}
Template reference variable statement context (#heroForm)
top
New Mental Model
Mental Model
Save
Save
Save
click me
{{clicked}}
Hero Name:
{{name}}
help
Special
button
top
Property vs. Attribute (img examples)
top
Enabled (but does nothing)
Disabled
Still disabled
disabled by attribute
disabled by property binding
Disabled Cancel
Enabled Save
top
Property Binding
Cancel is disabled
[ngClass] binding to the classes property
is the interpolated image.
is the property bound image.
"{{title}}" is the interpolated title.
" " is the property bound title.
"{{evilTitle}}" is the interpolated evil title.
" " is the property bound evil title.
top
Attribute Binding
{{actionName}} with Aria
Disabled
Disabled as well
Enabled (but inert)
top
Class Binding
Bad curly special
Bad curly
The class binding is special
This one is not so special
This class binding is special too
top
Style Binding
Red
Save
Big
Small
top
Event Binding
Save
On Save
click with myClick
{{clickMessage}}
Save, no propagation
Save w/ propagation
top
Two-way Binding
De-sugared two-way binding
top
NgModel (two-way) Binding
Result: {{currentHero.name}}
without NgModel
[(ngModel)]
bindon-ngModel
(ngModelChange)="...name=$event"
(ngModelChange)="setUppercaseName($event)"
top
NgClass Binding
currentClasses is {{currentClasses | json}}
This div is initially saveable, unchanged, and special
saveable |
modified: |
special:
Refresh currentClasses
This div should be {{ canSave ? "": "not"}} saveable,
{{ isUnchanged ? "unchanged" : "modified" }} and,
{{ isSpecial ? "": "not"}} special after clicking "Refresh".
This div is special
Bad curly special
Curly special
top
NgStyle Binding
This div is x-large or smaller.
[ngStyle] binding to currentStyles - CSS property names
currentStyles is {{currentStyles | json}}
This div is initially italic, normal weight, and extra large (24px).
italic: |
normal: |
xlarge:
Refresh currentStyles
This div should be {{ canSave ? "italic": "plain"}},
{{ isUnchanged ? "normal weight" : "bold" }} and,
{{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".
top
NgIf Binding
Hello, {{currentHero.name}}
Hello, {{nullHero.name}}
Add {{currentHero.name}} with template
Hero Detail removed from DOM (via template) because isActive is false
Show with class
Hide with class
Show with style
Hide with style
top
NgFor Binding
top
*ngFor with index
with semi-colon separator
{{i + 1}} - {{hero.name}}
with comma separator
{{i + 1}} - {{hero.name}}
top
*ngFor trackBy
Reset heroes
Change ids
Clear counts
without trackBy
({{hero.id}}) {{hero.name}}
Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
with trackBy
({{hero.id}}) {{hero.name}}
Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
with trackBy and semi-colon separator
({{hero.id}}) {{hero.name}}
with trackBy and comma separator
({{hero.id}}) {{hero.name}}
with trackBy and space separator
({{hero.id}}) {{hero.name}}
with generic trackById function
({{hero.id}}) {{hero.name}}
top
NgSwitch Binding
Pick your favorite hero
{{h.name}}
Are you as confused as {{currentHero.name}}?
top
Template reference variables
Call
Fax
Example Form
top
Save
myClick2
{{clickMessage2}}
top
Pipes
Title through uppercase pipe: {{title | uppercase}}
Title through a pipe chain:
{{title | uppercase | lowercase}}
Birthdate: {{currentHero?.birthdate | date:'longDate'}}
{{currentHero | json}}
Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}
Price: {{product.price | currency:'USD':true}}
top
Safe navigation operator ?.
The title is {{title}}
The current hero's name is {{currentHero?.name}}
The current hero's name is {{currentHero.name}}
The null hero's name is {{nullHero.name}}
The null hero's name is {{nullHero && nullHero.name}}
The null hero's name is {{nullHero?.name}}
top
Non-null assertion operator !.
The hero's name is {{hero!.name}}
top
$any type cast function $any( ) .
The hero's marker is {{$any(hero).marker}}
Undeclared members is {{$any(this).member}}
top
Enums in binding
The name of the Color.Red enum is {{Color[Color.Red]}}.
The current color is {{Color[color]}} and its number is {{color}}.
Enum Toggle
top
=====================================output=====================================
Template Syntax
Interpolation
Expression context
Statement context
Mental Model
Buttons
Properties vs. Attributes
Property Binding
Event Binding
Two-way Binding
Directives
Template reference variables
Inputs and outputs
Pipes
Safe navigation operator ?.
Non-null assertion operator !.
Enums
Interpolation
My current hero is {{ currentHero.name }}
{{ title }}
The sum of 1 + 1 is {{ 1 + 1 }}
The sum of 1 + 1 is not {{ 1 + 1 + getVal() }}
top
Expression context
Component expression context ({{title}},
[hidden]="isUnchanged")
{{ title }}
changed
Template input variable expression context (let hero)
{{ hero.name }}
Template reference variable expression context (#heroInput)
Type something:
{{ heroInput.value }}
top
Statement context
Component statement context ( (click)="onSave() )
Delete hero
Template $event statement context
Save
Template input variable statement context (let hero)
{{ hero.name }}
Template reference variable statement context (#heroForm)
top
New Mental Model
Mental Model
Save
Save
Save
click me
{{ clicked }}
Hero Name:
{{ name }}
help
Special
button
top
Property vs. Attribute (img examples)
top
Enabled (but does nothing)
Disabled
Still disabled
disabled by attribute
disabled by property binding
Disabled Cancel
Enabled Save
top
Property Binding
Cancel is disabled
[ngClass] binding to the classes property
is the interpolated image.
is the property bound image.
"{{ title }}" is the interpolated title.
" " is the property bound title.
"{{ evilTitle }}" is the interpolated evil title.
" " is the property bound evil
title.
top
Attribute Binding
{{ actionName }} with Aria
Disabled
Disabled as well
Enabled (but inert)
top
Class Binding
Bad curly special
Bad curly
The class binding is special
This one is not so special
This class binding is special too
top
Style Binding
Red
Save
Big
Small
top
Event Binding
Save
On Save
click with myClick
{{ clickMessage }}
Save, no propagation
Save w/ propagation
top
Two-way Binding
De-sugared two-way binding
top
NgModel (two-way) Binding
Result: {{ currentHero.name }}
without NgModel
[(ngModel)]
bindon-ngModel
(ngModelChange)="...name=$event"
(ngModelChange)="setUppercaseName($event)"
top
NgClass Binding
currentClasses is {{ currentClasses | json }}
This div is initially saveable, unchanged, and special
saveable |
modified:
|
special:
Refresh currentClasses
This div should be {{ canSave ? "" : "not" }} saveable,
{{ isUnchanged ? "unchanged" : "modified" }} and,
{{ isSpecial ? "" : "not" }} special after clicking "Refresh".
This div is special
Bad curly special
Curly special
top
NgStyle Binding
This div is x-large or smaller.
[ngStyle] binding to currentStyles - CSS property names
currentStyles is {{ currentStyles | json }}
This div is initially italic, normal weight, and extra large (24px).
italic: |
normal: |
xlarge:
Refresh currentStyles
This div should be {{ canSave ? "italic" : "plain" }},
{{ isUnchanged ? "normal weight" : "bold" }} and,
{{ isSpecial ? "extra large" : "normal size" }} after clicking "Refresh".
top
NgIf Binding
Hello, {{ currentHero.name }}
Hello, {{ nullHero.name }}
Add {{ currentHero.name }} with template
Hero Detail removed from DOM (via template) because isActive is false
Show with class
Hide with class
Show with style
Hide with style
top
NgFor Binding
top
*ngFor with index
with semi-colon separator
{{ i + 1 }} - {{ hero.name }}
with comma separator
{{ i + 1 }} - {{ hero.name }}
top
*ngFor trackBy
Reset heroes
Change ids
Clear counts
without trackBy
({{ hero.id }}) {{ hero.name }}
Hero DOM elements change #{{ heroesNoTrackByCount }} without trackBy
with trackBy
({{ hero.id }}) {{ hero.name }}
Hero DOM elements change #{{ heroesWithTrackByCount }} with trackBy
with trackBy and semi-colon separator
({{ hero.id }}) {{ hero.name }}
with trackBy and comma separator
({{ hero.id }}) {{ hero.name }}
with trackBy and space separator
({{ hero.id }}) {{ hero.name }}
with generic trackById function
({{ hero.id }}) {{ hero.name }}
top
NgSwitch Binding
Pick your favorite hero
{{
h.name
}}
Are you as confused as {{ currentHero.name }}?
top
Template reference variables
Call
Fax
Example Form
top
Save
myClick2
{{ clickMessage2 }}
top
Pipes
Title through uppercase pipe: {{ title | uppercase }}
Title through a pipe chain:
{{ title | uppercase | lowercase }}
Birthdate: {{ currentHero?.birthdate | date: "longDate" }}
{{ currentHero | json }}
Birthdate: {{ currentHero?.birthdate | date: "longDate" | uppercase }}
Price: {{ product.price | currency: "USD":true }}
top
Safe navigation operator ?.
The title is {{ title }}
The current hero's name is {{ currentHero?.name }}
The current hero's name is {{ currentHero.name }}
The null hero's name is {{ nullHero.name }}
The null hero's name is {{ nullHero && nullHero.name }}
The null hero's name is {{ nullHero?.name }}
top
Non-null assertion operator !.
The hero's name is {{ hero!.name }}
top
$any type cast function $any( ) .
The hero's marker is {{ $any(hero).marker }}
Undeclared members is {{$any(this).member}}
top
Enums in binding
The name of the Color.Red enum is {{ Color[Color.Red] }}.
The current color is {{ Color[color] }} and its number is {{ color }}.
Enum Toggle
top
================================================================================
`;
exports[`real-world.component.html 3`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 1
| printWidth
=====================================input======================================
Template Syntax
Interpolation
Expression context
Statement context
Mental Model
Buttons
Properties vs. Attributes
Property Binding
Event Binding
Two-way Binding
Directives
Template reference variables
Inputs and outputs
Pipes
Safe navigation operator ?.
Non-null assertion operator !.
Enums
Interpolation
My current hero is {{currentHero.name}}
{{title}}
The sum of 1 + 1 is {{1 + 1}}
The sum of 1 + 1 is not {{1 + 1 + getVal()}}
top
Expression context
Component expression context ({{title}}, [hidden]="isUnchanged")
{{title}}
changed
Template input variable expression context (let hero)
{{hero.name}}
Template reference variable expression context (#heroInput)
Type something:
{{heroInput.value}}
top
Statement context
Component statement context ( (click)="onSave() )
Delete hero
Template $event statement context
Save
Template input variable statement context (let hero)
{{hero.name}}
Template reference variable statement context (#heroForm)
top
New Mental Model
Mental Model
Save
Save
Save
click me
{{clicked}}
Hero Name:
{{name}}
help
Special
button
top
Property vs. Attribute (img examples)
top
Enabled (but does nothing)
Disabled
Still disabled
disabled by attribute
disabled by property binding
Disabled Cancel
Enabled Save
top
Property Binding
Cancel is disabled
[ngClass] binding to the classes property
is the interpolated image.
is the property bound image.
"{{title}}" is the interpolated title.
" " is the property bound title.
"{{evilTitle}}" is the interpolated evil title.
" " is the property bound evil title.
top
Attribute Binding
{{actionName}} with Aria
Disabled
Disabled as well
Enabled (but inert)
top
Class Binding
Bad curly special
Bad curly
The class binding is special
This one is not so special
This class binding is special too
top
Style Binding
Red
Save
Big
Small
top
Event Binding
Save
On Save
click with myClick
{{clickMessage}}
Save, no propagation
Save w/ propagation
top
Two-way Binding
De-sugared two-way binding
top
NgModel (two-way) Binding
Result: {{currentHero.name}}
without NgModel
[(ngModel)]
bindon-ngModel
(ngModelChange)="...name=$event"
(ngModelChange)="setUppercaseName($event)"
top
NgClass Binding
currentClasses is {{currentClasses | json}}
This div is initially saveable, unchanged, and special
saveable |
modified: |
special:
Refresh currentClasses
This div should be {{ canSave ? "": "not"}} saveable,
{{ isUnchanged ? "unchanged" : "modified" }} and,
{{ isSpecial ? "": "not"}} special after clicking "Refresh".
This div is special
Bad curly special
Curly special
top
NgStyle Binding
This div is x-large or smaller.
[ngStyle] binding to currentStyles - CSS property names
currentStyles is {{currentStyles | json}}
This div is initially italic, normal weight, and extra large (24px).
italic: |
normal: |
xlarge:
Refresh currentStyles
This div should be {{ canSave ? "italic": "plain"}},
{{ isUnchanged ? "normal weight" : "bold" }} and,
{{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".
top
NgIf Binding
Hello, {{currentHero.name}}
Hello, {{nullHero.name}}
Add {{currentHero.name}} with template
Hero Detail removed from DOM (via template) because isActive is false
Show with class
Hide with class
Show with style
Hide with style
top
NgFor Binding
top
*ngFor with index
with semi-colon separator
{{i + 1}} - {{hero.name}}
with comma separator
{{i + 1}} - {{hero.name}}
top
*ngFor trackBy
Reset heroes
Change ids
Clear counts
without trackBy
({{hero.id}}) {{hero.name}}
Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
with trackBy
({{hero.id}}) {{hero.name}}
Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
with trackBy and semi-colon separator
({{hero.id}}) {{hero.name}}
with trackBy and comma separator
({{hero.id}}) {{hero.name}}
with trackBy and space separator
({{hero.id}}) {{hero.name}}
with generic trackById function
({{hero.id}}) {{hero.name}}
top
NgSwitch Binding
Pick your favorite hero
{{h.name}}
Are you as confused as {{currentHero.name}}?
top
Template reference variables
Call
Fax
Example Form
top
Save
myClick2
{{clickMessage2}}
top
Pipes
Title through uppercase pipe: {{title | uppercase}}
Title through a pipe chain:
{{title | uppercase | lowercase}}
Birthdate: {{currentHero?.birthdate | date:'longDate'}}
{{currentHero | json}}
Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}
Price: {{product.price | currency:'USD':true}}
top
Safe navigation operator ?.
The title is {{title}}
The current hero's name is {{currentHero?.name}}
The current hero's name is {{currentHero.name}}
The null hero's name is {{nullHero.name}}
The null hero's name is {{nullHero && nullHero.name}}
The null hero's name is {{nullHero?.name}}
top
Non-null assertion operator !.
The hero's name is {{hero!.name}}
top
$any type cast function $any( ) .
The hero's marker is {{$any(hero).marker}}
Undeclared members is {{$any(this).member}}
top
Enums in binding
The name of the Color.Red enum is {{Color[Color.Red]}}.
The current color is {{Color[color]}} and its number is {{color}}.
Enum Toggle
top
=====================================output=====================================
Template
Syntax
Interpolation
Expression
context
Statement
context
Mental
Model
Buttons
Properties
vs.
Attributes
Property
Binding
Event
Binding
Two-way
Binding
Directives
Template
reference
variables
Inputs
and
outputs
Pipes
Safe
navigation
operator
?.
Non-null
assertion
operator
!.
Enums
Interpolation
My
current
hero
is
{{
currentHero.name
}}
{{
title
}}
The
sum
of
1
+
1
is
{{
1 +
1
}}
The
sum
of
1
+
1
is
not
{{
1 +
1 +
getVal()
}}
top
Expression
context
Component
expression
context
({{title}},
[hidden]="isUnchanged")
{{
title
}}
changed
Template
input
variable
expression
context
(let
hero)
{{
hero.name
}}
Template
reference
variable
expression
context
(#heroInput)
Type
something:
{{
heroInput.value
}}
top
Statement
context
Component
statement
context
(
(click)="onSave()
)
Delete
hero
Template
$event
statement
context
Save
Template
input
variable
statement
context
(let
hero)
{{
hero.name
}}
Template
reference
variable
statement
context
(#heroForm)
top
New
Mental
Model
Mental
Model
Save
Save
Save
click
me
{{
clicked
}}
Hero
Name:
{{
name
}}
help
Special
button
top
Property
vs.
Attribute
(img
examples)
top
Enabled
(but
does
nothing)
Disabled
Still
disabled
disabled
by
attribute
disabled
by
property
binding
Disabled
Cancel
Enabled
Save
top
Property
Binding
Cancel
is
disabled
[ngClass]
binding
to
the
classes
property
is
the
interpolated
image.
is
the
property
bound
image.
"{{
title
}}"
is
the
interpolated
title.
" "
is
the
property
bound
title.
"{{
evilTitle
}}"
is
the
interpolated
evil
title.
" "
is
the
property
bound
evil
title.
top
Attribute
Binding
{{
actionName
}}
with
Aria
Disabled
Disabled
as
well
Enabled
(but
inert)
top
Class
Binding
Bad
curly
special
Bad
curly
The
class
binding
is
special
This
one
is
not
so
special
This
class
binding
is
special
too
top
Style
Binding
Red
Save
Big
Small
top
Event
Binding
Save
On
Save
click
with
myClick
{{
clickMessage
}}
Save,
no
propagation
Save
w/
propagation
top
Two-way
Binding
De-sugared
two-way
binding
top
NgModel
(two-way)
Binding
Result:
{{
currentHero.name
}}
without
NgModel
[(ngModel)]
bindon-ngModel
(ngModelChange)="...name=$event"
(ngModelChange)="setUppercaseName($event)"
top
NgClass
Binding
currentClasses
is
{{
currentClasses
| json
}}
This
div
is
initially
saveable,
unchanged,
and
special
saveable
|
modified:
|
special:
Refresh
currentClasses
This
div
should
be
{{
canSave
? ""
: "not"
}}
saveable,
{{
isUnchanged
? "unchanged"
: "modified"
}}
and,
{{
isSpecial
? ""
: "not"
}}
special
after
clicking
"Refresh".
This
div
is
special
Bad
curly
special
Curly
special
top
NgStyle
Binding
This
div
is
x-large
or
smaller.
[ngStyle]
binding
to
currentStyles
-
CSS
property
names
currentStyles
is
{{
currentStyles
| json
}}
This
div
is
initially
italic,
normal
weight,
and
extra
large
(24px).
italic:
|
normal:
|
xlarge:
Refresh
currentStyles
This
div
should
be
{{
canSave
? "italic"
: "plain"
}},
{{
isUnchanged
? "normal weight"
: "bold"
}}
and,
{{
isSpecial
? "extra large"
: "normal size"
}}
after
clicking
"Refresh".
top
NgIf
Binding
Hello,
{{
currentHero.name
}}
Hello,
{{
nullHero.name
}}
Add
{{
currentHero.name
}}
with
template
Hero
Detail
removed
from
DOM
(via
template)
because
isActive
is
false
Show
with
class
Hide
with
class
Show
with
style
Hide
with
style
top
NgFor
Binding
top
*ngFor
with
index
with
semi-colon
separator
{{
i +
1
}}
-
{{
hero.name
}}
with
comma
separator
{{
i +
1
}}
-
{{
hero.name
}}
top
*ngFor
trackBy
Reset
heroes
Change
ids
Clear
counts
without
trackBy
({{
hero.id
}})
{{
hero.name
}}
Hero
DOM
elements
change
#{{
heroesNoTrackByCount
}}
without
trackBy
with
trackBy
({{
hero.id
}})
{{
hero.name
}}
Hero
DOM
elements
change
#{{
heroesWithTrackByCount
}}
with
trackBy
with
trackBy
and
semi-colon
separator
({{
hero.id
}})
{{
hero.name
}}
with
trackBy
and
comma
separator
({{
hero.id
}})
{{
hero.name
}}
with
trackBy
and
space
separator
({{
hero.id
}})
{{
hero.name
}}
with
generic
trackById
function
({{
hero.id
}})
{{
hero.name
}}
top
NgSwitch
Binding
Pick
your
favorite
hero
{{
h.name
}}
Are
you
as
confused
as
{{
currentHero.name
}}?
top
Template
reference
variables
Call
Fax
Example
Form
top
Save
myClick2
{{
clickMessage2
}}
top
Pipes
Title
through
uppercase
pipe:
{{
title
| uppercase
}}
Title
through
a
pipe
chain:
{{
title
| uppercase
| lowercase
}}
Birthdate:
{{
currentHero?.birthdate
| date
: "longDate"
}}
{{
currentHero
| json
}}
Birthdate:
{{
currentHero?.birthdate
| date
: "longDate"
| uppercase
}}
Price: {{
product.price
| currency
: "USD"
: true
}}
top
Safe
navigation
operator
?.
The
title
is
{{
title
}}
The
current
hero's
name
is
{{
currentHero?.name
}}
The
current
hero's
name
is
{{
currentHero.name
}}
The
null
hero's
name
is
{{
nullHero.name
}}
The
null
hero's
name
is
{{
nullHero &&
nullHero.name
}}
The
null
hero's
name
is
{{
nullHero?.name
}}
top
Non-null
assertion
operator
!.
The
hero's
name
is
{{
hero!
.name
}}
top
$any
type
cast
function
$any(
) .
The
hero's
marker
is
{{
$any(
hero
)
.marker
}}
Undeclared
members
is
{{$any(this).member}}
top
Enums
in
binding
The
name
of
the
Color.Red
enum
is
{{
Color[
Color
.Red
]
}}.
The
current
color
is
{{
Color[
color
]
}}
and
its
number
is
{{
color
}}.
Enum
Toggle
top
================================================================================
`;
exports[`real-world.component.html 4`] = `
====================================options=====================================
htmlWhitespaceSensitivity: "ignore"
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
Template Syntax
Interpolation
Expression context
Statement context
Mental Model
Buttons
Properties vs. Attributes
Property Binding
Event Binding
Two-way Binding
Directives
Template reference variables
Inputs and outputs
Pipes
Safe navigation operator ?.
Non-null assertion operator !.
Enums
Interpolation
My current hero is {{currentHero.name}}
{{title}}
The sum of 1 + 1 is {{1 + 1}}
The sum of 1 + 1 is not {{1 + 1 + getVal()}}
top
Expression context
Component expression context ({{title}}, [hidden]="isUnchanged")
{{title}}
changed
Template input variable expression context (let hero)
{{hero.name}}
Template reference variable expression context (#heroInput)
Type something:
{{heroInput.value}}
top
Statement context
Component statement context ( (click)="onSave() )
Delete hero
Template $event statement context
Save
Template input variable statement context (let hero)
{{hero.name}}
Template reference variable statement context (#heroForm)
top
New Mental Model
Mental Model
Save
Save
Save
click me
{{clicked}}
Hero Name:
{{name}}
help
Special
button
top
Property vs. Attribute (img examples)
top
Enabled (but does nothing)
Disabled
Still disabled
disabled by attribute
disabled by property binding
Disabled Cancel
Enabled Save
top
Property Binding
Cancel is disabled
[ngClass] binding to the classes property
is the interpolated image.
is the property bound image.
"{{title}}" is the interpolated title.
" " is the property bound title.
"{{evilTitle}}" is the interpolated evil title.
" " is the property bound evil title.
top
Attribute Binding
{{actionName}} with Aria
Disabled
Disabled as well
Enabled (but inert)
top
Class Binding
Bad curly special
Bad curly
The class binding is special
This one is not so special
This class binding is special too
top
Style Binding
Red
Save
Big
Small
top
Event Binding
Save
On Save
click with myClick
{{clickMessage}}
Save, no propagation
Save w/ propagation
top
Two-way Binding
De-sugared two-way binding
top
NgModel (two-way) Binding
Result: {{currentHero.name}}
without NgModel
[(ngModel)]
bindon-ngModel
(ngModelChange)="...name=$event"
(ngModelChange)="setUppercaseName($event)"
top
NgClass Binding
currentClasses is {{currentClasses | json}}
This div is initially saveable, unchanged, and special
saveable |
modified: |
special:
Refresh currentClasses
This div should be {{ canSave ? "": "not"}} saveable,
{{ isUnchanged ? "unchanged" : "modified" }} and,
{{ isSpecial ? "": "not"}} special after clicking "Refresh".
This div is special
Bad curly special
Curly special
top
NgStyle Binding
This div is x-large or smaller.
[ngStyle] binding to currentStyles - CSS property names
currentStyles is {{currentStyles | json}}
This div is initially italic, normal weight, and extra large (24px).
italic: |
normal: |
xlarge:
Refresh currentStyles
This div should be {{ canSave ? "italic": "plain"}},
{{ isUnchanged ? "normal weight" : "bold" }} and,
{{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".
top
NgIf Binding
Hello, {{currentHero.name}}
Hello, {{nullHero.name}}
Add {{currentHero.name}} with template
Hero Detail removed from DOM (via template) because isActive is false
Show with class
Hide with class
Show with style
Hide with style
top
NgFor Binding
top
*ngFor with index
with semi-colon separator
{{i + 1}} - {{hero.name}}
with comma separator
{{i + 1}} - {{hero.name}}
top
*ngFor trackBy
Reset heroes
Change ids
Clear counts
without trackBy
({{hero.id}}) {{hero.name}}
Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
with trackBy
({{hero.id}}) {{hero.name}}
Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
with trackBy and semi-colon separator
({{hero.id}}) {{hero.name}}
with trackBy and comma separator
({{hero.id}}) {{hero.name}}
with trackBy and space separator
({{hero.id}}) {{hero.name}}
with generic trackById function
({{hero.id}}) {{hero.name}}
top
NgSwitch Binding
Pick your favorite hero
{{h.name}}
Are you as confused as {{currentHero.name}}?
top
Template reference variables
Call
Fax
Example Form
top
Save
myClick2
{{clickMessage2}}
top
Pipes
Title through uppercase pipe: {{title | uppercase}}
Title through a pipe chain:
{{title | uppercase | lowercase}}
Birthdate: {{currentHero?.birthdate | date:'longDate'}}
{{currentHero | json}}
Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}
Price: {{product.price | currency:'USD':true}}
top
Safe navigation operator ?.
The title is {{title}}
The current hero's name is {{currentHero?.name}}
The current hero's name is {{currentHero.name}}
The null hero's name is {{nullHero.name}}
The null hero's name is {{nullHero && nullHero.name}}
The null hero's name is {{nullHero?.name}}
top
Non-null assertion operator !.
The hero's name is {{hero!.name}}
top
$any type cast function $any( ) .
The hero's marker is {{$any(hero).marker}}
Undeclared members is {{$any(this).member}}
top
Enums in binding
The name of the Color.Red enum is {{Color[Color.Red]}}.
The current color is {{Color[color]}} and its number is {{color}}.
Enum Toggle
top
=====================================output=====================================
Template Syntax
Interpolation
Expression context
Statement context
Mental Model
Buttons
Properties vs. Attributes
Property Binding
Event Binding
Two-way Binding
Directives
Template reference variables
Inputs and outputs
Pipes
Safe navigation operator
?.
Non-null assertion operator
!.
Enums
Interpolation
My current hero is {{ currentHero.name }}
{{ title }}
The sum of 1 + 1 is {{ 1 + 1 }}
The sum of 1 + 1 is not {{ 1 + 1 + getVal() }}
top
Expression context
Component expression context ({{title}},
[hidden]="isUnchanged")
{{ title }}
changed
Template input variable expression context (let hero)
{{ hero.name }}
Template reference variable expression context (#heroInput)
Type something:
{{ heroInput.value }}
top
Statement context
Component statement context ( (click)="onSave() )
Delete hero
Template $event statement context
Save
Template input variable statement context (let hero)
{{ hero.name }}
Template reference variable statement context (#heroForm)
top
New Mental Model
Mental Model
Save
Save
Save
click me
{{ clicked }}
Hero Name:
{{ name }}
help
Special
button
top
Property vs. Attribute (img examples)
top
Enabled (but does nothing)
Disabled
Still disabled
disabled by attribute
disabled by property binding
Disabled Cancel
Enabled Save
top
Property Binding
Cancel is disabled
[ngClass] binding to the classes property
is the
interpolated
image.
is the
property bound
image.
"{{ title }}" is the
interpolated
title.
"
" is the
property bound
title.
"{{ evilTitle }}" is the
interpolated
evil title.
"
" is the
property bound
evil title.
top
Attribute Binding
{{ actionName }} with Aria
Disabled
Disabled as well
Enabled (but inert)
top
Class Binding
Bad curly special
Bad curly
The class binding is special
This one is not so special
This class binding is special too
top
Style Binding
Red
Save
Big
Small
top
Event Binding
Save
On Save
click with myClick
{{ clickMessage }}
Save, no propagation
Save w/ propagation
top
Two-way Binding
De-sugared two-way binding
top
NgModel (two-way) Binding
Result: {{ currentHero.name }}
without NgModel
[(ngModel)]
bindon-ngModel
(ngModelChange)="...name=$event"
(ngModelChange)="setUppercaseName($event)"
top
NgClass Binding
currentClasses is {{ currentClasses | json }}
This div is initially saveable, unchanged, and special
saveable
|
modified:
|
special:
Refresh currentClasses
This div should be {{ canSave ? "" : "not" }} saveable,
{{ isUnchanged ? "unchanged" : "modified" }} and,
{{ isSpecial ? "" : "not" }} special after clicking "Refresh".
This div is special
Bad curly special
Curly special
top
NgStyle Binding
This div is x-large or smaller.
[ngStyle] binding to currentStyles - CSS property names
currentStyles is {{ currentStyles | json }}
This div is initially italic, normal weight, and extra large (24px).
italic:
|
normal:
|
xlarge:
Refresh currentStyles
This div should be {{ canSave ? "italic" : "plain" }},
{{ isUnchanged ? "normal weight" : "bold" }} and,
{{ isSpecial ? "extra large" : "normal size" }} after clicking "Refresh".
top
NgIf Binding
Hello, {{ currentHero.name }}
Hello, {{ nullHero.name }}
Add {{ currentHero.name }} with template
Hero Detail removed from DOM (via template) because isActive is false
Show with class
Hide with class
Show with style
Hide with style
top
NgFor Binding
top
*ngFor with index
with
semi-colon
separator
{{ i + 1 }} - {{ hero.name }}
with
comma
separator
{{ i + 1 }} - {{ hero.name }}
top
*ngFor trackBy
Reset heroes
Change ids
Clear counts
without
trackBy
({{ hero.id }}) {{ hero.name }}
Hero DOM elements change #{{ heroesNoTrackByCount }} without trackBy
with trackBy
({{ hero.id }}) {{ hero.name }}
Hero DOM elements change #{{ heroesWithTrackByCount }} with trackBy
with trackBy and
semi-colon
separator
({{ hero.id }}) {{ hero.name }}
with trackBy and
comma
separator
({{ hero.id }}) {{ hero.name }}
with trackBy and
space
separator
({{ hero.id }}) {{ hero.name }}
with
generic
trackById function
({{ hero.id }}) {{ hero.name }}
top
NgSwitch Binding
Pick your favorite hero
{{ h.name }}
Are you as confused as {{ currentHero.name }}?
top
Template reference variables
Call
Fax
Example Form
top
Save
myClick2
{{ clickMessage2 }}
top
Pipes
Title through uppercase pipe: {{ title | uppercase }}
Title through a pipe chain:
{{ title | uppercase | lowercase }}
Birthdate: {{ currentHero?.birthdate | date: "longDate" }}
{{ currentHero | json }}
Birthdate: {{ currentHero?.birthdate | date: "longDate" | uppercase }}
Price:
{{ product.price | currency: "USD":true }}
top
Safe navigation operator
?.
The title is {{ title }}
The current hero's name is {{ currentHero?.name }}
The current hero's name is {{ currentHero.name }}
The null hero's name is {{ nullHero.name }}
The null hero's name is {{ nullHero && nullHero.name }}
The null hero's name is {{ nullHero?.name }}
top
Non-null assertion operator
!.
The hero's name is {{ hero!.name }}
top
$any type cast function
$any( )
.
The hero's marker is {{ $any(hero).marker }}
Undeclared members is {{$any(this).member}}
top
Enums in binding
The name of the Color.Red enum is {{ Color[Color.Red] }}.
The current color is {{ Color[color] }} and its number is {{ color }}.
Enum Toggle
top
================================================================================
`;
exports[`real-world.component.html 5`] = `
====================================options=====================================
bracketSpacing: false
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
Template Syntax
Interpolation
Expression context
Statement context
Mental Model
Buttons
Properties vs. Attributes
Property Binding
Event Binding
Two-way Binding
Directives
Template reference variables
Inputs and outputs
Pipes
Safe navigation operator ?.
Non-null assertion operator !.
Enums
Interpolation
My current hero is {{currentHero.name}}
{{title}}
The sum of 1 + 1 is {{1 + 1}}
The sum of 1 + 1 is not {{1 + 1 + getVal()}}
top
Expression context
Component expression context ({{title}}, [hidden]="isUnchanged")
{{title}}
changed
Template input variable expression context (let hero)
{{hero.name}}
Template reference variable expression context (#heroInput)
Type something:
{{heroInput.value}}
top
Statement context
Component statement context ( (click)="onSave() )
Delete hero
Template $event statement context
Save
Template input variable statement context (let hero)
{{hero.name}}
Template reference variable statement context (#heroForm)
top
New Mental Model
Mental Model
Save
Save
Save
click me
{{clicked}}
Hero Name:
{{name}}
help
Special
button
top
Property vs. Attribute (img examples)
top
Enabled (but does nothing)
Disabled
Still disabled
disabled by attribute
disabled by property binding
Disabled Cancel
Enabled Save
top
Property Binding
Cancel is disabled
[ngClass] binding to the classes property
is the interpolated image.
is the property bound image.
"{{title}}" is the interpolated title.
" " is the property bound title.
"{{evilTitle}}" is the interpolated evil title.
" " is the property bound evil title.
top
Attribute Binding
{{actionName}} with Aria
Disabled
Disabled as well
Enabled (but inert)
top
Class Binding
Bad curly special
Bad curly
The class binding is special
This one is not so special
This class binding is special too
top
Style Binding
Red
Save
Big
Small
top
Event Binding
Save
On Save
click with myClick
{{clickMessage}}
Save, no propagation
Save w/ propagation
top
Two-way Binding
De-sugared two-way binding
top
NgModel (two-way) Binding
Result: {{currentHero.name}}
without NgModel
[(ngModel)]
bindon-ngModel
(ngModelChange)="...name=$event"
(ngModelChange)="setUppercaseName($event)"
top
NgClass Binding
currentClasses is {{currentClasses | json}}
This div is initially saveable, unchanged, and special
saveable |
modified: |
special:
Refresh currentClasses
This div should be {{ canSave ? "": "not"}} saveable,
{{ isUnchanged ? "unchanged" : "modified" }} and,
{{ isSpecial ? "": "not"}} special after clicking "Refresh".
This div is special
Bad curly special
Curly special
top
NgStyle Binding
This div is x-large or smaller.
[ngStyle] binding to currentStyles - CSS property names
currentStyles is {{currentStyles | json}}
This div is initially italic, normal weight, and extra large (24px).
italic: |
normal: |
xlarge:
Refresh currentStyles
This div should be {{ canSave ? "italic": "plain"}},
{{ isUnchanged ? "normal weight" : "bold" }} and,
{{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".
top
NgIf Binding
Hello, {{currentHero.name}}
Hello, {{nullHero.name}}
Add {{currentHero.name}} with template
Hero Detail removed from DOM (via template) because isActive is false
Show with class
Hide with class
Show with style
Hide with style
top
NgFor Binding
top
*ngFor with index
with semi-colon separator
{{i + 1}} - {{hero.name}}
with comma separator
{{i + 1}} - {{hero.name}}
top
*ngFor trackBy
Reset heroes
Change ids
Clear counts
without trackBy
({{hero.id}}) {{hero.name}}
Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
with trackBy
({{hero.id}}) {{hero.name}}
Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
with trackBy and semi-colon separator
({{hero.id}}) {{hero.name}}
with trackBy and comma separator
({{hero.id}}) {{hero.name}}
with trackBy and space separator
({{hero.id}}) {{hero.name}}
with generic trackById function
({{hero.id}}) {{hero.name}}
top
NgSwitch Binding
Pick your favorite hero
{{h.name}}
Are you as confused as {{currentHero.name}}?
top
Template reference variables
Call
Fax
Example Form
top
Save
myClick2
{{clickMessage2}}
top
Pipes
Title through uppercase pipe: {{title | uppercase}}
Title through a pipe chain:
{{title | uppercase | lowercase}}
Birthdate: {{currentHero?.birthdate | date:'longDate'}}
{{currentHero | json}}
Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}
Price: {{product.price | currency:'USD':true}}
top
Safe navigation operator ?.
The title is {{title}}
The current hero's name is {{currentHero?.name}}
The current hero's name is {{currentHero.name}}
The null hero's name is {{nullHero.name}}
The null hero's name is {{nullHero && nullHero.name}}
The null hero's name is {{nullHero?.name}}
top
Non-null assertion operator !.
The hero's name is {{hero!.name}}
top
$any type cast function $any( ) .
The hero's marker is {{$any(hero).marker}}
Undeclared members is {{$any(this).member}}
top
Enums in binding
The name of the Color.Red enum is {{Color[Color.Red]}}.
The current color is {{Color[color]}} and its number is {{color}}.
Enum Toggle
top
=====================================output=====================================
Template Syntax
Interpolation
Expression context
Statement context
Mental Model
Buttons
Properties vs. Attributes
Property Binding
Event Binding
Two-way Binding
Directives
Template reference variables
Inputs and outputs
Pipes
Safe navigation operator ?.
Non-null assertion operator !.
Enums
Interpolation
My current hero is {{ currentHero.name }}
{{ title }}
The sum of 1 + 1 is {{ 1 + 1 }}
The sum of 1 + 1 is not {{ 1 + 1 + getVal() }}
top
Expression context
Component expression context ({{title}},
[hidden]="isUnchanged")
{{ title }}
changed
Template input variable expression context (let hero)
{{ hero.name }}
Template reference variable expression context (#heroInput)
Type something:
{{ heroInput.value }}
top
Statement context
Component statement context ( (click)="onSave() )
Delete hero
Template $event statement context
Save
Template input variable statement context (let hero)
{{ hero.name }}
Template reference variable statement context (#heroForm)
top
New Mental Model
Mental Model
Save
Save
Save
click me
{{ clicked }}
Hero Name:
{{ name }}
help
Special
button
top
Property vs. Attribute (img examples)
top
Enabled (but does nothing)
Disabled
Still disabled
disabled by attribute
disabled by property binding
Disabled Cancel
Enabled Save
top
Property Binding
Cancel is disabled
[ngClass] binding to the classes property
is the interpolated image.
is the property bound image.
"{{ title }}" is the interpolated title.
" " is the property bound title.
"{{ evilTitle }}" is the interpolated evil title.
" " is the property bound evil
title.
top
Attribute Binding
{{ actionName }} with Aria
Disabled
Disabled as well
Enabled (but inert)
top
Class Binding
Bad curly special
Bad curly
The class binding is special
This one is not so special
This class binding is special too
top
Style Binding
Red
Save
Big
Small
top
Event Binding
Save
On Save
click with myClick
{{ clickMessage }}
Save, no propagation
Save w/ propagation
top
Two-way Binding
De-sugared two-way binding
top
NgModel (two-way) Binding
Result: {{ currentHero.name }}
without NgModel
[(ngModel)]
bindon-ngModel
(ngModelChange)="...name=$event"
(ngModelChange)="setUppercaseName($event)"
top
NgClass Binding
currentClasses is {{ currentClasses | json }}
This div is initially saveable, unchanged, and special
saveable |
modified:
|
special:
Refresh currentClasses
This div should be {{ canSave ? "" : "not" }} saveable,
{{ isUnchanged ? "unchanged" : "modified" }} and,
{{ isSpecial ? "" : "not" }} special after clicking "Refresh".
This div is special
Bad curly special
Curly special
top
NgStyle Binding
This div is x-large or smaller.
[ngStyle] binding to currentStyles - CSS property names
currentStyles is {{ currentStyles | json }}
This div is initially italic, normal weight, and extra large (24px).
italic: |
normal: |
xlarge:
Refresh currentStyles
This div should be {{ canSave ? "italic" : "plain" }},
{{ isUnchanged ? "normal weight" : "bold" }} and,
{{ isSpecial ? "extra large" : "normal size" }} after clicking "Refresh".
top
NgIf Binding
Hello, {{ currentHero.name }}
Hello, {{ nullHero.name }}
Add {{ currentHero.name }} with template
Hero Detail removed from DOM (via template) because isActive is false
Show with class
Hide with class
Show with style
Hide with style
top
NgFor Binding
top
*ngFor with index
with semi-colon separator
{{ i + 1 }} - {{ hero.name }}
with comma separator
{{ i + 1 }} - {{ hero.name }}
top
*ngFor trackBy
Reset heroes
Change ids
Clear counts
without trackBy
({{ hero.id }}) {{ hero.name }}
Hero DOM elements change #{{ heroesNoTrackByCount }} without trackBy
with trackBy
({{ hero.id }}) {{ hero.name }}
Hero DOM elements change #{{ heroesWithTrackByCount }} with trackBy
with trackBy and semi-colon separator
({{ hero.id }}) {{ hero.name }}
with trackBy and comma separator
({{ hero.id }}) {{ hero.name }}
with trackBy and space separator
({{ hero.id }}) {{ hero.name }}
with generic trackById function
({{ hero.id }}) {{ hero.name }}
top
NgSwitch Binding
Pick your favorite hero
{{
h.name
}}
Are you as confused as {{ currentHero.name }}?
top
Template reference variables
Call
Fax
Example Form
top
Save
myClick2
{{ clickMessage2 }}
top
Pipes
Title through uppercase pipe: {{ title | uppercase }}
Title through a pipe chain:
{{ title | uppercase | lowercase }}
Birthdate: {{ currentHero?.birthdate | date: "longDate" }}
{{ currentHero | json }}
Birthdate: {{ currentHero?.birthdate | date: "longDate" | uppercase }}
Price: {{ product.price | currency: "USD":true }}
top
Safe navigation operator ?.
The title is {{ title }}
The current hero's name is {{ currentHero?.name }}
The current hero's name is {{ currentHero.name }}
The null hero's name is {{ nullHero.name }}
The null hero's name is {{ nullHero && nullHero.name }}
The null hero's name is {{ nullHero?.name }}
top
Non-null assertion operator !.
The hero's name is {{ hero!.name }}
top
$any type cast function $any( ) .
The hero's marker is {{ $any(hero).marker }}
Undeclared members is {{$any(this).member}}
top
Enums in binding
The name of the Color.Red enum is {{ Color[Color.Red] }}.
The current color is {{ Color[color] }} and its number is {{ color }}.
Enum Toggle
top
================================================================================
`;
exports[`tag-name.component.html 1`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`tag-name.component.html 2`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 80
trailingComma: "es5"
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`tag-name.component.html 3`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 1
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`tag-name.component.html 4`] = `
====================================options=====================================
htmlWhitespaceSensitivity: "ignore"
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;
exports[`tag-name.component.html 5`] = `
====================================options=====================================
bracketSpacing: false
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
=====================================output=====================================
================================================================================
`;