{{ a | b : c }}
+{{ 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 }}
+
+
+
+
+
+{{copyTypes[options.copyType]}}
+{{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
+{{a}}{{b}}
+
+ {{ aNormalValue | aPipe }}:
+ {{ aReallyReallySuperLongValue | andASuperLongPipeJustToBreakThis }}
+
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+{{ a | b: c }}
+{{ 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 }}
+
+
+
+
+
+
+ {{ copyTypes[options.copyType] }}
+
+{{
+ listRow.NextScheduledSendStatus == 1 ||
+ listRow.NextScheduledSendStatus == 2 ||
+ listRow.NextScheduledSendStatus == 3
+}}
+
+
+ {{ a }}
+
+ {{ b }}
+
+
+
+ {{ aNormalValue | aPipe }}:
+
+ {{ aReallyReallySuperLongValue | andASuperLongPipeJustToBreakThis }}
+
+
`;
@@ -8044,3 +8460,1654 @@ bindon-ngModel
-->
`;
+
+exports[`real-world.component.html - angular-verify 4`] = `
+
+
+
+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() ) +
+
+
+
+Template $event statement context
+
+
+
+
+Template input variable statement context (let hero)
+ +
+
+
+
+Template reference variable statement context (#heroForm)
+
+
+
+
+top
+
+
+New Mental Model
+ + + +Mental Model
+
+
++ +
+
+
+Mental Model
+
+ + +
+
+
+
++ +
+ ![]()
+
++ + +
click me
+{{clicked}}
++ +
+ Hero Name:
+
+ {{name}}
+
++ + +
+ +
Special
++ + + +top + + +
Property vs. Attribute (img examples)
+ +
+
++ +
Buttons
+ + + + ++ + +
+ + + +top + + +
Property Binding
+ +[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
+ + +| One-Two | |
| Five | Six |
+ + +
+ + +
+
+
+
+
+
+
+
+
+
+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
+ + + + + + + +top + + +Event Binding
+ + + + + +
+
+
+
+
+
+click with myClick
+{{clickMessage}}
++ +
Click me
+
+
+
+Click me too!
+
+
+
+
+
+
+
+
+
+top
+
+Two-way Binding
+
+
+Resizable Text
+
++
+
+
+top
+
+
+De-sugared two-way binding
+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
+
+
++ | + | + + +
+
+ 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).
+
+
+
++ | + | + + +
+
+ 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}}
+
+
+
+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
+ +
+
+{{hero.name}}
++ +
+
+
+
+top
+
+*ngFor with index
+with semi-colon separator
+
+
+
+{{i + 1}} - {{hero.name}}
+with comma separator
+
+
+
+
+top
+
+{{i + 1}} - {{hero.name}}
+*ngFor trackBy
+ + + + +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
+
+
+
+top
+
+
+({{hero.id}}) {{hero.name}}
+NgSwitch Binding
+ +Pick your favorite hero
+
+
+
+
+
+
+
+top
+
+
+Are you as confused as {{currentHero.name}}?
+ Template reference variables
+ + + + + + + + + + + + + + +Example Form
+Inputs and Outputs
+ +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}}
+
+
+
+ {{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 !.
+ +
+
+
+
+top
+
+
+
+ The hero's name is {{hero!.name}}
+
+$any type cast function $any( ).
+ +
+
+
+
+
+ The hero's marker is {{$any(hero).marker}}
+
+
+
+
+
+top
+
+
+
+
+ Undeclared members is {{$any(this).member}}
+
+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}}.
+
+
+
+
+
+
+
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+
+
+
+ {{submitMessage}}
+
+Template Syntax
+Interpolation ++Expression context +
+Statement context +
+Mental Model +
+Buttons +
+Properties vs. Attributes +
+
+Property Binding +
+ +
+Event Binding +
+Two-way Binding +
+
+
Directives
+
+ NgModel (two-way) Binding
+
+ NgClass Binding +
+ NgStyle Binding +
+ NgIf +
+ NgFor +
+ + NgSwitch +
+
++ NgClass Binding +
+ NgStyle Binding +
+ NgIf +
+ NgFor +
+ + NgSwitch +
+
+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() )
+ + +Template $event statement context
+ + +Template input variable statement context (let hero)
+ +
+
+
+
+Template reference variable statement context (#heroForm)
+
+
+
+
+top
+
+
++
New Mental Model
+ + + +Mental Model
+
+
++
+ +
+
+
+Mental Model
+
+ +
+ +
+
+
+
++
+ +
+ ![]()
+
++
+ + +
click me
+{{ clicked }}
++
+ +
+ Hero Name:
+
+ {{ name }}
+
++
+ + +
+
+ +
Special
++
+ + + +top + + +
+
Property vs. Attribute (img examples)
+ +
+
++
+ +
+
Buttons
+ + + + ++
+ + +
+
+ + + +top + + +
+
Property Binding
+ +[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
+ + +| One-Two | |
| Five | +Six | +
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+
+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
+ + + + + + + +top + + ++
Event Binding
+ + + + + +
+
+
+
+
+click with myClick
+ {{ clickMessage }}
++ +
+ Click me
+
+
+
+Click me too!
+
+
+
+
+
+
+
+
+
+top
+
++
Two-way Binding
+
+
+Resizable Text
+
++
+
+
+top
+
+
+De-sugared two-way binding
++
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
+
+
+
++ +| + +| + + +
+
+
+ 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).
+
+
+
++ +| + +| + + +
+
+
+ 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 }}
+
+
+
+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
+ +
+
+{{ hero.name }}
++ +
+
+
+
+top
+
+*ngFor with index
++ with + semi-colon + separator +
+
+
+
+
+ {{ i + 1 }} - {{ hero.name }}
+
++ with + comma + separator +
+
+
+
+
+top
+
+
+ {{ i + 1 }} - {{ hero.name }}
+
+*ngFor trackBy
+ + + + ++ 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 +
+
+
+
+top
+
+
+
+ ({{ hero.id }}) {{ hero.name }}
+
++
NgSwitch Binding
+ +Pick your favorite hero
+
+
+
+
+
+
+
+top
+
+
+
+ Are you as confused as {{ currentHero.name }}?
+
+ +
Template reference variables
+ + + + + + + + + + + + + + +Example Form
++
Inputs and Outputs
+ +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 }}
+
+
+
+
+
+ {{ 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 + !. +
+ +
+
+
+
+top
+
+
+The hero's name is {{ hero!.name }}
++
+ $any type cast function + $any( ) + . +
+ +
+
+
+
+The hero's marker is {{ $any(hero).marker }}
+
+
+
+
+top
+
+
+
+Undeclared members is {{$any(this).member}}
++
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 }}.
+
+
+
+
+
+
+
+
+`;
diff --git a/tests/html_angular/interpolation.component.html b/tests/html_angular/interpolation.component.html
index d8021e80d..134c8f934 100644
--- a/tests/html_angular/interpolation.component.html
+++ b/tests/html_angular/interpolation.component.html
@@ -50,3 +50,7 @@
>{{b}}
+
+ {{ aNormalValue | aPipe }}:
+ {{ aReallyReallySuperLongValue | andASuperLongPipeJustToBreakThis }}
+
diff --git a/tests/html_angular/jsfmt.spec.js b/tests/html_angular/jsfmt.spec.js
index d491f09bd..b3183c499 100644
--- a/tests/html_angular/jsfmt.spec.js
+++ b/tests/html_angular/jsfmt.spec.js
@@ -1,3 +1,4 @@
run_spec(__dirname, ["angular"]);
run_spec(__dirname, ["angular"], { trailingComma: "es5" });
run_spec(__dirname, ["angular"], { printWidth: 1 });
+run_spec(__dirname, ["angular"], { htmlWhitespaceSensitivity: "ignore" });
{{ submitMessage }}
+