jsfmt.spec.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`attributes.component.html - angular-verify 1`] = `
<div
    bindon-target=" a | b : c "
    [(target)]=" a | b : c "
    bind-target=" a | b : c "
    [target]=" a | b : c "
    [target]=" 0 - 1 "
    [target]=" - 1 "
    [target]=" a ? 1 : 2 "
    [target]=" "
    [target]=" a ( 1 ) ( 2 ) "
    [target]=" a [ b ] "
    [target]=" [ 1 ] "
    [target]=" { 'a' : 1 } "
    [target]=" { a : 1 } "
    [target]=" { 
      trailingComma : 'notAllowed'
    }"
    [target]=" [ 
      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
    ]"
    [target]=" true "
    [target]=" undefined "
    [target]=" null "
    [target]=" ( 1 ) "
    [target]=" 1 "
    [target]="  'hello' "
    [target]=" a ( 1 , 2 ) "
    [target]=" a . b ( 1 , 2 ) "
    [target]=" x ! "
    [target]=" ! x "
    [target]=" ( ( a ) ) "
    [target]=" a "
    [target]=" a // hello "
    [target]=" a . b "
    [target]=" javascript : 'hello world' "
    [target]=" a ?. b ( ) "
    [target]=" a ?. b "
    [target]=" this . a "
    on-target=" a = 1 "
    (target)=" a = 1 "
    (target)=" a . b = 1 "
    (target)=" a [ b ] = 1 "
    (target)=" a // hello "
    (target)=" a ; b "
    (event)="  0  "
    (event)="  a.b  "
    (event)="  hello  "
    (event)="  hello()  "
    (event)="  a && b  "
    (event)="  a && b()  "
    (event)="  foo = $event  "
    (event)="  foo == $event  "
    *ngIf=" something?true:false    "
    *ngFor="  let     hero     of     heroes"
    *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
    *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
    *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
    *ngFor="  let    hero     of heroes; let i  =  index"
    *ngFor="  let    hero     of heroes; value     myValue"
    *ngIf=" condition  ;  then  thenBlock  else  elseBlock "
    *ngIf=" condition  as  value  ;  else  elseBlock "
    *directive=" let hero "
    *directive=" let hero = hello "
    *directive=" let hero of heroes "
    *directive=" let hero ; of : heroes "
    *directive=" a "
    *directive=" a as b "
    *directive=" a , b "
    *directive=" a ; b "
    *directive=" a ; b c "
    *directive=" a ; b : c "
    *directive=" a ; b : c as d "
    *directive=" a ; b as c "
    *ngIf="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
    *ngIf="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3; else hello"
    (target)="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
    [target]="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
    [target]="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
    [error]="'We couldn\\\\\\'t find anything with that name.'"
    *ngIf="form.controls.details?.controls.amount?.errors.min"
    [ngClass]="
    {'btn-success': (dialog$ | async).level === dialogLevelEnum.SUCCESS,
      'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
      'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER}"
></div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div
  bindon-target="a | b: c"
  [(target)]="a | b: c"
  bind-target="a | b: c"
  [target]="a | b: c"
  [target]="0 - 1"
  [target]="-1"
  [target]="a ? 1 : 2"
  [target]=""
  [target]="a(1)(2)"
  [target]="a[b]"
  [target]="[1]"
  [target]="{ a: 1 }"
  [target]="{ a: 1 }"
  [target]="{
    trailingComma: 'notAllowed'
  }"
  [target]="[
    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
  ]"
  [target]="true"
  [target]="undefined"
  [target]="null"
  [target]="1"
  [target]="1"
  [target]="'hello'"
  [target]="a(1, 2)"
  [target]="a.b(1, 2)"
  [target]="x!"
  [target]="!x"
  [target]="a"
  [target]="a"
  [target]="a // hello"
  [target]="a.b"
  [target]="javascript: 'hello world' "
  [target]="a?.b()"
  [target]="a?.b"
  [target]="this.a"
  on-target="a = 1"
  (target)="a = 1"
  (target)="a.b = 1"
  (target)="a[b] = 1"
  (target)="(a) // hello"
  (target)="(a); (b)"
  (event)="(0)"
  (event)="(a.b)"
  (event)="(hello)"
  (event)="hello()"
  (event)="(a && b)"
  (event)="a && b()"
  (event)="foo = $event"
  (event)="(foo == $event)"
  *ngIf="something ? true : false"
  *ngFor="let hero of heroes"
  *ngFor="
    let hero of [1, 2, 3, 666666666666666666666666666666666666];
    let i = index
  "
  *ngFor="let hero of heroes; trackBy: trackByHeroes"
  *ngFor="let item of items; index as i; trackBy: trackByFn"
  *ngFor="let hero of heroes; let i = index"
  *ngFor="let hero of heroes; value: myValue"
  *ngIf="condition; then: thenBlock; else: elseBlock"
  *ngIf="condition as value; else: elseBlock"
  *directive="let hero"
  *directive="let hero = hello"
  *directive="let hero of heroes"
  *directive="let hero of heroes"
  *directive="a"
  *directive="a as b"
  *directive="a; b"
  *directive="a; b"
  *directive="a; b: c"
  *directive="a; b: c"
  *directive="a; b: c as d"
  *directive="a; b as c"
  *ngIf="
    listRow.NextScheduledSendStatus == 1 ||
    listRow.NextScheduledSendStatus == 2 ||
    listRow.NextScheduledSendStatus == 3
  "
  *ngIf="
    listRow.NextScheduledSendStatus == 1 ||
      listRow.NextScheduledSendStatus == 2 ||
      listRow.NextScheduledSendStatus == 3;
    else: hello
  "
  (target)="
    (listRow.NextScheduledSendStatus == 1 ||
      listRow.NextScheduledSendStatus == 2 ||
      listRow.NextScheduledSendStatus == 3)
  "
  [target]="
    listRow.NextScheduledSendStatus == 1 ||
    listRow.NextScheduledSendStatus == 2 ||
    listRow.NextScheduledSendStatus == 3
  "
  [target]="{
    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
  }"
  [error]="'We couldn\\\\\\'t find anything with that name.'"
  *ngIf="form.controls.details?.controls.amount?.errors.min"
  [ngClass]="{
    'btn-success': (dialog$ | async).level === dialogLevelEnum.SUCCESS,
    'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
    'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER
  }"
></div>

`;

exports[`attributes.component.html - angular-verify 2`] = `
<div
    bindon-target=" a | b : c "
    [(target)]=" a | b : c "
    bind-target=" a | b : c "
    [target]=" a | b : c "
    [target]=" 0 - 1 "
    [target]=" - 1 "
    [target]=" a ? 1 : 2 "
    [target]=" "
    [target]=" a ( 1 ) ( 2 ) "
    [target]=" a [ b ] "
    [target]=" [ 1 ] "
    [target]=" { 'a' : 1 } "
    [target]=" { a : 1 } "
    [target]=" { 
      trailingComma : 'notAllowed'
    }"
    [target]=" [ 
      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
    ]"
    [target]=" true "
    [target]=" undefined "
    [target]=" null "
    [target]=" ( 1 ) "
    [target]=" 1 "
    [target]="  'hello' "
    [target]=" a ( 1 , 2 ) "
    [target]=" a . b ( 1 , 2 ) "
    [target]=" x ! "
    [target]=" ! x "
    [target]=" ( ( a ) ) "
    [target]=" a "
    [target]=" a // hello "
    [target]=" a . b "
    [target]=" javascript : 'hello world' "
    [target]=" a ?. b ( ) "
    [target]=" a ?. b "
    [target]=" this . a "
    on-target=" a = 1 "
    (target)=" a = 1 "
    (target)=" a . b = 1 "
    (target)=" a [ b ] = 1 "
    (target)=" a // hello "
    (target)=" a ; b "
    (event)="  0  "
    (event)="  a.b  "
    (event)="  hello  "
    (event)="  hello()  "
    (event)="  a && b  "
    (event)="  a && b()  "
    (event)="  foo = $event  "
    (event)="  foo == $event  "
    *ngIf=" something?true:false    "
    *ngFor="  let     hero     of     heroes"
    *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
    *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
    *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
    *ngFor="  let    hero     of heroes; let i  =  index"
    *ngFor="  let    hero     of heroes; value     myValue"
    *ngIf=" condition  ;  then  thenBlock  else  elseBlock "
    *ngIf=" condition  as  value  ;  else  elseBlock "
    *directive=" let hero "
    *directive=" let hero = hello "
    *directive=" let hero of heroes "
    *directive=" let hero ; of : heroes "
    *directive=" a "
    *directive=" a as b "
    *directive=" a , b "
    *directive=" a ; b "
    *directive=" a ; b c "
    *directive=" a ; b : c "
    *directive=" a ; b : c as d "
    *directive=" a ; b as c "
    *ngIf="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
    *ngIf="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3; else hello"
    (target)="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
    [target]="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
    [target]="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
    [error]="'We couldn\\\\\\'t find anything with that name.'"
    *ngIf="form.controls.details?.controls.amount?.errors.min"
    [ngClass]="
    {'btn-success': (dialog$ | async).level === dialogLevelEnum.SUCCESS,
      'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
      'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER}"
></div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div
  bindon-target="a | b: c"
  [(target)]="a | b: c"
  bind-target="a | b: c"
  [target]="a | b: c"
  [target]="0 - 1"
  [target]="-1"
  [target]="a ? 1 : 2"
  [target]=""
  [target]="a(1)(2)"
  [target]="a[b]"
  [target]="[1]"
  [target]="{ a: 1 }"
  [target]="{ a: 1 }"
  [target]="{
    trailingComma: 'notAllowed'
  }"
  [target]="[
    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
  ]"
  [target]="true"
  [target]="undefined"
  [target]="null"
  [target]="1"
  [target]="1"
  [target]="'hello'"
  [target]="a(1, 2)"
  [target]="a.b(1, 2)"
  [target]="x!"
  [target]="!x"
  [target]="a"
  [target]="a"
  [target]="a // hello"
  [target]="a.b"
  [target]="javascript: 'hello world' "
  [target]="a?.b()"
  [target]="a?.b"
  [target]="this.a"
  on-target="a = 1"
  (target)="a = 1"
  (target)="a.b = 1"
  (target)="a[b] = 1"
  (target)="(a) // hello"
  (target)="(a); (b)"
  (event)="(0)"
  (event)="(a.b)"
  (event)="(hello)"
  (event)="hello()"
  (event)="(a && b)"
  (event)="a && b()"
  (event)="foo = $event"
  (event)="(foo == $event)"
  *ngIf="something ? true : false"
  *ngFor="let hero of heroes"
  *ngFor="
    let hero of [1, 2, 3, 666666666666666666666666666666666666];
    let i = index
  "
  *ngFor="let hero of heroes; trackBy: trackByHeroes"
  *ngFor="let item of items; index as i; trackBy: trackByFn"
  *ngFor="let hero of heroes; let i = index"
  *ngFor="let hero of heroes; value: myValue"
  *ngIf="condition; then: thenBlock; else: elseBlock"
  *ngIf="condition as value; else: elseBlock"
  *directive="let hero"
  *directive="let hero = hello"
  *directive="let hero of heroes"
  *directive="let hero of heroes"
  *directive="a"
  *directive="a as b"
  *directive="a; b"
  *directive="a; b"
  *directive="a; b: c"
  *directive="a; b: c"
  *directive="a; b: c as d"
  *directive="a; b as c"
  *ngIf="
    listRow.NextScheduledSendStatus == 1 ||
    listRow.NextScheduledSendStatus == 2 ||
    listRow.NextScheduledSendStatus == 3
  "
  *ngIf="
    listRow.NextScheduledSendStatus == 1 ||
      listRow.NextScheduledSendStatus == 2 ||
      listRow.NextScheduledSendStatus == 3;
    else: hello
  "
  (target)="
    (listRow.NextScheduledSendStatus == 1 ||
      listRow.NextScheduledSendStatus == 2 ||
      listRow.NextScheduledSendStatus == 3)
  "
  [target]="
    listRow.NextScheduledSendStatus == 1 ||
    listRow.NextScheduledSendStatus == 2 ||
    listRow.NextScheduledSendStatus == 3
  "
  [target]="{
    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
  }"
  [error]="'We couldn\\\\\\'t find anything with that name.'"
  *ngIf="form.controls.details?.controls.amount?.errors.min"
  [ngClass]="{
    'btn-success': (dialog$ | async).level === dialogLevelEnum.SUCCESS,
    'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
    'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER
  }"
></div>

`;

exports[`attributes.component.html - angular-verify 3`] = `
<div
    bindon-target=" a | b : c "
    [(target)]=" a | b : c "
    bind-target=" a | b : c "
    [target]=" a | b : c "
    [target]=" 0 - 1 "
    [target]=" - 1 "
    [target]=" a ? 1 : 2 "
    [target]=" "
    [target]=" a ( 1 ) ( 2 ) "
    [target]=" a [ b ] "
    [target]=" [ 1 ] "
    [target]=" { 'a' : 1 } "
    [target]=" { a : 1 } "
    [target]=" { 
      trailingComma : 'notAllowed'
    }"
    [target]=" [ 
      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
    ]"
    [target]=" true "
    [target]=" undefined "
    [target]=" null "
    [target]=" ( 1 ) "
    [target]=" 1 "
    [target]="  'hello' "
    [target]=" a ( 1 , 2 ) "
    [target]=" a . b ( 1 , 2 ) "
    [target]=" x ! "
    [target]=" ! x "
    [target]=" ( ( a ) ) "
    [target]=" a "
    [target]=" a // hello "
    [target]=" a . b "
    [target]=" javascript : 'hello world' "
    [target]=" a ?. b ( ) "
    [target]=" a ?. b "
    [target]=" this . a "
    on-target=" a = 1 "
    (target)=" a = 1 "
    (target)=" a . b = 1 "
    (target)=" a [ b ] = 1 "
    (target)=" a // hello "
    (target)=" a ; b "
    (event)="  0  "
    (event)="  a.b  "
    (event)="  hello  "
    (event)="  hello()  "
    (event)="  a && b  "
    (event)="  a && b()  "
    (event)="  foo = $event  "
    (event)="  foo == $event  "
    *ngIf=" something?true:false    "
    *ngFor="  let     hero     of     heroes"
    *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
    *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
    *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
    *ngFor="  let    hero     of heroes; let i  =  index"
    *ngFor="  let    hero     of heroes; value     myValue"
    *ngIf=" condition  ;  then  thenBlock  else  elseBlock "
    *ngIf=" condition  as  value  ;  else  elseBlock "
    *directive=" let hero "
    *directive=" let hero = hello "
    *directive=" let hero of heroes "
    *directive=" let hero ; of : heroes "
    *directive=" a "
    *directive=" a as b "
    *directive=" a , b "
    *directive=" a ; b "
    *directive=" a ; b c "
    *directive=" a ; b : c "
    *directive=" a ; b : c as d "
    *directive=" a ; b as c "
    *ngIf="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
    *ngIf="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3; else hello"
    (target)="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
    [target]="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
    [target]="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
    [error]="'We couldn\\\\\\'t find anything with that name.'"
    *ngIf="form.controls.details?.controls.amount?.errors.min"
    [ngClass]="
    {'btn-success': (dialog$ | async).level === dialogLevelEnum.SUCCESS,
      'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
      'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER}"
></div>
~
<div
  bindon-target="
    a
      | b
        : c
  "
  [(target)]="
    a
      | b
        : c
  "
  bind-target="
    a
      | b
        : c
  "
  [target]="
    a
      | b
        : c
  "
  [target]="
    0 -
    1
  "
  [target]="
    -1
  "
  [target]="
    a
      ? 1
      : 2
  "
  [target]="

  "
  [target]="
    a(
      1
    )(
      2
    )
  "
  [target]="
    a[
      b
    ]
  "
  [target]="[
    1
  ]"
  [target]="{
    a: 1
  }"
  [target]="{
    a: 1
  }"
  [target]="{
    trailingComma:
      'notAllowed'
  }"
  [target]="[
    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
  ]"
  [target]="
    true
  "
  [target]="
    undefined
  "
  [target]="
    null
  "
  [target]="
    1
  "
  [target]="
    1
  "
  [target]="
    'hello'
  "
  [target]="
    a(
      1,
      2
    )
  "
  [target]="
    a.b(
      1,
      2
    )
  "
  [target]="
    x!
  "
  [target]="
    !x
  "
  [target]="
    a
  "
  [target]="
    a
  "
  [target]="
    a // hello
  "
  [target]="
    a.b
  "
  [target]="
    javascript: 'hello world'
  "
  [target]="
    a?.b()
  "
  [target]="
    a?.b
  "
  [target]="
    this
      .a
  "
  on-target="
    a = 1
  "
  (target)="
    a = 1
  "
  (target)="
    a.b = 1
  "
  (target)="
    a[
      b
    ] = 1
  "
  (target)="
    (a) // hello
  "
  (target)="
    (a);
    (b)
  "
  (event)="
    (0)
  "
  (event)="
    (a.b)
  "
  (event)="
    (hello)
  "
  (event)="
    hello()
  "
  (event)="
    (a &&
      b)
  "
  (event)="
    a &&
      b()
  "
  (event)="
    foo = $event
  "
  (event)="
    (foo ==
      $event)
  "
  *ngIf="
    something
      ? true
      : false
  "
  *ngFor="
    let hero of heroes
  "
  *ngFor="
    let hero of [
      1,
      2,
      3,
      666666666666666666666666666666666666
    ];
    let i = index
  "
  *ngFor="
    let hero of heroes;
    trackBy: trackByHeroes
  "
  *ngFor="
    let item of items;
    index as i;
    trackBy: trackByFn
  "
  *ngFor="
    let hero of heroes;
    let i = index
  "
  *ngFor="
    let hero of heroes;
    value: myValue
  "
  *ngIf="
    condition;
    then: thenBlock;
    else: elseBlock
  "
  *ngIf="
    condition as value;
    else: elseBlock
  "
  *directive="
    let hero
  "
  *directive="
    let hero = hello
  "
  *directive="
    let hero of heroes
  "
  *directive="
    let hero of heroes
  "
  *directive="
    a
  "
  *directive="
    a as b
  "
  *directive="
    a;
    b
  "
  *directive="
    a;
    b
  "
  *directive="
    a;
    b: c
  "
  *directive="
    a;
    b: c
  "
  *directive="
    a;
    b: c as d
  "
  *directive="
    a;
    b as c
  "
  *ngIf="
    listRow.NextScheduledSendStatus ==
      1 ||
    listRow.NextScheduledSendStatus ==
      2 ||
    listRow.NextScheduledSendStatus ==
      3
  "
  *ngIf="
    listRow.NextScheduledSendStatus ==
      1 ||
      listRow.NextScheduledSendStatus ==
        2 ||
      listRow.NextScheduledSendStatus ==
        3;
    else: hello
  "
  (target)="
    (listRow.NextScheduledSendStatus ==
      1 ||
      listRow.NextScheduledSendStatus ==
        2 ||
      listRow.NextScheduledSendStatus ==
        3)
  "
  [target]="
    listRow.NextScheduledSendStatus ==
      1 ||
    listRow.NextScheduledSendStatus ==
      2 ||
    listRow.NextScheduledSendStatus ==
      3
  "
  [target]="{
    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
  }"
  [error]="
    'We couldn\\\\\\'t find anything with that name.'
  "
  *ngIf="
    form
      .controls
      .details
      ?.controls
      .amount
      ?.errors
      .min
  "
  [ngClass]="{
    'btn-success':
      (
        dialog$
        | async
      )
        .level ===
      dialogLevelEnum.SUCCESS,
    'btn-warning':
      (
        dialog$
        | async
      )
        .level ===
      dialogLevelEnum.WARNING,
    'btn-svg':
      (
        dialog$
        | async
      )
        .level ===
      dialogLevelEnum.DANGER
  }"
></div>

`;

exports[`ignore-attribute.component.html - angular-verify 1`] = `
<div
    bindon-target=" a | b : c "
    [(target)]=" a | b : c "
    bind-target=" a | b : c "
></div>
<!--  prettier-ignore-attribute -->
<div
    bindon-target=" a | b : c "
    [(target)]=" a | b : c "
    bind-target=" a | b : c "
></div>
<!--  prettier-ignore-attribute bind-target -->
<div
    bindon-target=" a | b : c "
    [(target)]=" a | b : c "
    bind-target=" a | b : c "
></div>
<!--  prettier-ignore-attribute [(target)] bind-target -->
<div
    bindon-target=" a | b : c "
    [(target)]=" a | b : c "
    bind-target=" a | b : c "
></div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div
  bindon-target="a | b: c"
  [(target)]="a | b: c"
  bind-target="a | b: c"
></div>
<!-- prettier-ignore-attribute -->
<div
  bindon-target=" a | b : c "
  [(target)]=" a | b : c "
  bind-target=" a | b : c "
></div>
<!-- prettier-ignore-attribute bind-target -->
<div
  bindon-target="a | b: c"
  [(target)]="a | b: c"
  bind-target=" a | b : c "
></div>
<!-- prettier-ignore-attribute [(target)] bind-target -->
<div
  bindon-target="a | b: c"
  [(target)]=" a | b : c "
  bind-target=" a | b : c "
></div>

`;

exports[`ignore-attribute.component.html - angular-verify 2`] = `
<div
    bindon-target=" a | b : c "
    [(target)]=" a | b : c "
    bind-target=" a | b : c "
></div>
<!--  prettier-ignore-attribute -->
<div
    bindon-target=" a | b : c "
    [(target)]=" a | b : c "
    bind-target=" a | b : c "
></div>
<!--  prettier-ignore-attribute bind-target -->
<div
    bindon-target=" a | b : c "
    [(target)]=" a | b : c "
    bind-target=" a | b : c "
></div>
<!--  prettier-ignore-attribute [(target)] bind-target -->
<div
    bindon-target=" a | b : c "
    [(target)]=" a | b : c "
    bind-target=" a | b : c "
></div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div
  bindon-target="a | b: c"
  [(target)]="a | b: c"
  bind-target="a | b: c"
></div>
<!-- prettier-ignore-attribute -->
<div
  bindon-target=" a | b : c "
  [(target)]=" a | b : c "
  bind-target=" a | b : c "
></div>
<!-- prettier-ignore-attribute bind-target -->
<div
  bindon-target="a | b: c"
  [(target)]="a | b: c"
  bind-target=" a | b : c "
></div>
<!-- prettier-ignore-attribute [(target)] bind-target -->
<div
  bindon-target="a | b: c"
  [(target)]=" a | b : c "
  bind-target=" a | b : c "
></div>

`;

exports[`ignore-attribute.component.html - angular-verify 3`] = `
<div
    bindon-target=" a | b : c "
    [(target)]=" a | b : c "
    bind-target=" a | b : c "
></div>
<!--  prettier-ignore-attribute -->
<div
    bindon-target=" a | b : c "
    [(target)]=" a | b : c "
    bind-target=" a | b : c "
></div>
<!--  prettier-ignore-attribute bind-target -->
<div
    bindon-target=" a | b : c "
    [(target)]=" a | b : c "
    bind-target=" a | b : c "
></div>
<!--  prettier-ignore-attribute [(target)] bind-target -->
<div
    bindon-target=" a | b : c "
    [(target)]=" a | b : c "
    bind-target=" a | b : c "
></div>
~
<div
  bindon-target="
    a
      | b
        : c
  "
  [(target)]="
    a
      | b
        : c
  "
  bind-target="
    a
      | b
        : c
  "
></div>
<!--
  prettier-ignore-attribute
-->
<div
  bindon-target=" a | b : c "
  [(target)]=" a | b : c "
  bind-target=" a | b : c "
></div>
<!--
  prettier-ignore-attribute bind-target
-->
<div
  bindon-target="
    a
      | b
        : c
  "
  [(target)]="
    a
      | b
        : c
  "
  bind-target=" a | b : c "
></div>
<!--
  prettier-ignore-attribute [(target)] bind-target
-->
<div
  bindon-target="
    a
      | b
        : c
  "
  [(target)]=" a | b : c "
  bind-target=" a | b : c "
></div>

`;

exports[`interpolation.component.html - angular-verify 1`] = `
<div>{{ a | b : c }}</div>
<div>{{ 0 - 1 }}</div>
<div>{{ - 1 }}</div>
<div>{{ a ? 1 : 2 }}</div>
<div>{{ a ( 1 ) ( 2 ) }}</div>
<div>{{ a [ b ] }}</div>
<div>{{ [ 1 ] }}</div>
<div>{{ { 'a' : 1 } }}</div>
<div>{{ { a : 1 } }}</div>
<div>{{ true }}</div>
<div>{{ undefined }}</div>
<div>{{ null }}</div>
<div>{{ ( 1 ) }}</div>
<div>{{ 1 }}</div>
<div>{{  'hello' }}</div>
<div>{{ a ( 1 , 2 ) }}</div>
<div>{{ a . b ( 1 , 2 ) }}</div>
<div>{{ x ! }}</div>
<div>{{ ! x }}</div>
<div>{{ ( ( a ) ) }}</div>
<div>{{ a }}</div>
<div>{{ a // hello }}</div>
<div>{{ a . b }}</div>
<div>{{ a ?. b ( ) }}</div>
<div>{{ a ?. b }}</div>
<div>{{  a // hello  }}</div>
<label for="transmissionLayoutRadioButton">{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}</label>
<label for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton">{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}</label>
<label for="transmissionLayoutRadioButton">{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}} </label>
<label for="transmissionLayoutRadioButton"> {{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}</label>
<label for="transmissionLayoutRadioButton"> {{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}} </label>
<div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>
{{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
<span
><!--
--><span
  >{{a}}</span
><!--
--><span
  >{{b}}</span
><!--
--></span>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div>{{ a | b: c }}</div>
<div>{{ 0 - 1 }}</div>
<div>{{ -1 }}</div>
<div>{{ a ? 1 : 2 }}</div>
<div>{{ a(1)(2) }}</div>
<div>{{ a[b] }}</div>
<div>{{ [1] }}</div>
<div>{{ { a: 1 } }}</div>
<div>{{ { a: 1 } }}</div>
<div>{{ true }}</div>
<div>{{ undefined }}</div>
<div>{{ null }}</div>
<div>{{ 1 }}</div>
<div>{{ 1 }}</div>
<div>{{ "hello" }}</div>
<div>{{ a(1, 2) }}</div>
<div>{{ a.b(1, 2) }}</div>
<div>{{ x! }}</div>
<div>{{ !x }}</div>
<div>{{ a }}</div>
<div>{{ a }}</div>
<div>{{ a // hello }}</div>
<div>{{ a.b }}</div>
<div>{{ a?.b() }}</div>
<div>{{ a?.b }}</div>
<div>{{ a // hello }}</div>
<label for="transmissionLayoutRadioButton">{{
  "SearchSelection.transmissionLayoutRadioButton"
    | localize: localizationSection
}}</label>
<label
  for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton"
  >{{
    "SearchSelection.transmissionLayoutRadioButton"
      | localize: localizationSection
  }}</label
>
<label for="transmissionLayoutRadioButton"
  >{{
    "SearchSelection.transmissionLayoutRadioButton"
      | localize: localizationSection
  }}
</label>
<label for="transmissionLayoutRadioButton">
  {{
    "SearchSelection.transmissionLayoutRadioButton"
      | localize: localizationSection
  }}</label
>
<label for="transmissionLayoutRadioButton">
  {{
    "SearchSelection.transmissionLayoutRadioButton"
      | localize: localizationSection
  }}
</label>
<div class="Nemo possimus non voluptates dicta accusamus id quia">
  {{ copyTypes[options.copyType] }}
</div>
{{
  listRow.NextScheduledSendStatus == 1 ||
    listRow.NextScheduledSendStatus == 2 ||
    listRow.NextScheduledSendStatus == 3
}}
<span
  ><!--
  --><span>{{ a }}</span
  ><!--
  --><span>{{ b }}</span
  ><!--
--></span>

`;

exports[`interpolation.component.html - angular-verify 2`] = `
<div>{{ a | b : c }}</div>
<div>{{ 0 - 1 }}</div>
<div>{{ - 1 }}</div>
<div>{{ a ? 1 : 2 }}</div>
<div>{{ a ( 1 ) ( 2 ) }}</div>
<div>{{ a [ b ] }}</div>
<div>{{ [ 1 ] }}</div>
<div>{{ { 'a' : 1 } }}</div>
<div>{{ { a : 1 } }}</div>
<div>{{ true }}</div>
<div>{{ undefined }}</div>
<div>{{ null }}</div>
<div>{{ ( 1 ) }}</div>
<div>{{ 1 }}</div>
<div>{{  'hello' }}</div>
<div>{{ a ( 1 , 2 ) }}</div>
<div>{{ a . b ( 1 , 2 ) }}</div>
<div>{{ x ! }}</div>
<div>{{ ! x }}</div>
<div>{{ ( ( a ) ) }}</div>
<div>{{ a }}</div>
<div>{{ a // hello }}</div>
<div>{{ a . b }}</div>
<div>{{ a ?. b ( ) }}</div>
<div>{{ a ?. b }}</div>
<div>{{  a // hello  }}</div>
<label for="transmissionLayoutRadioButton">{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}</label>
<label for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton">{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}</label>
<label for="transmissionLayoutRadioButton">{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}} </label>
<label for="transmissionLayoutRadioButton"> {{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}</label>
<label for="transmissionLayoutRadioButton"> {{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}} </label>
<div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>
{{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
<span
><!--
--><span
  >{{a}}</span
><!--
--><span
  >{{b}}</span
><!--
--></span>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div>{{ a | b: c }}</div>
<div>{{ 0 - 1 }}</div>
<div>{{ -1 }}</div>
<div>{{ a ? 1 : 2 }}</div>
<div>{{ a(1)(2) }}</div>
<div>{{ a[b] }}</div>
<div>{{ [1] }}</div>
<div>{{ { a: 1 } }}</div>
<div>{{ { a: 1 } }}</div>
<div>{{ true }}</div>
<div>{{ undefined }}</div>
<div>{{ null }}</div>
<div>{{ 1 }}</div>
<div>{{ 1 }}</div>
<div>{{ "hello" }}</div>
<div>{{ a(1, 2) }}</div>
<div>{{ a.b(1, 2) }}</div>
<div>{{ x! }}</div>
<div>{{ !x }}</div>
<div>{{ a }}</div>
<div>{{ a }}</div>
<div>{{ a // hello }}</div>
<div>{{ a.b }}</div>
<div>{{ a?.b() }}</div>
<div>{{ a?.b }}</div>
<div>{{ a // hello }}</div>
<label for="transmissionLayoutRadioButton">{{
  "SearchSelection.transmissionLayoutRadioButton"
    | localize: localizationSection
}}</label>
<label
  for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton"
  >{{
    "SearchSelection.transmissionLayoutRadioButton"
      | localize: localizationSection
  }}</label
>
<label for="transmissionLayoutRadioButton"
  >{{
    "SearchSelection.transmissionLayoutRadioButton"
      | localize: localizationSection
  }}
</label>
<label for="transmissionLayoutRadioButton">
  {{
    "SearchSelection.transmissionLayoutRadioButton"
      | localize: localizationSection
  }}</label
>
<label for="transmissionLayoutRadioButton">
  {{
    "SearchSelection.transmissionLayoutRadioButton"
      | localize: localizationSection
  }}
</label>
<div class="Nemo possimus non voluptates dicta accusamus id quia">
  {{ copyTypes[options.copyType] }}
</div>
{{
  listRow.NextScheduledSendStatus == 1 ||
    listRow.NextScheduledSendStatus == 2 ||
    listRow.NextScheduledSendStatus == 3
}}
<span
  ><!--
  --><span>{{ a }}</span
  ><!--
  --><span>{{ b }}</span
  ><!--
--></span>

`;

exports[`interpolation.component.html - angular-verify 3`] = `
<div>{{ a | b : c }}</div>
<div>{{ 0 - 1 }}</div>
<div>{{ - 1 }}</div>
<div>{{ a ? 1 : 2 }}</div>
<div>{{ a ( 1 ) ( 2 ) }}</div>
<div>{{ a [ b ] }}</div>
<div>{{ [ 1 ] }}</div>
<div>{{ { 'a' : 1 } }}</div>
<div>{{ { a : 1 } }}</div>
<div>{{ true }}</div>
<div>{{ undefined }}</div>
<div>{{ null }}</div>
<div>{{ ( 1 ) }}</div>
<div>{{ 1 }}</div>
<div>{{  'hello' }}</div>
<div>{{ a ( 1 , 2 ) }}</div>
<div>{{ a . b ( 1 , 2 ) }}</div>
<div>{{ x ! }}</div>
<div>{{ ! x }}</div>
<div>{{ ( ( a ) ) }}</div>
<div>{{ a }}</div>
<div>{{ a // hello }}</div>
<div>{{ a . b }}</div>
<div>{{ a ?. b ( ) }}</div>
<div>{{ a ?. b }}</div>
<div>{{  a // hello  }}</div>
<label for="transmissionLayoutRadioButton">{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}</label>
<label for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton">{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}</label>
<label for="transmissionLayoutRadioButton">{{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}} </label>
<label for="transmissionLayoutRadioButton"> {{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}}</label>
<label for="transmissionLayoutRadioButton"> {{
"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
}} </label>
<div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>
{{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
<span
><!--
--><span
  >{{a}}</span
><!--
--><span
  >{{b}}</span
><!--
--></span>
~
<div>
  {{
    a
      | b
        : c
  }}
</div>
<div>
  {{
    0 -
      1
  }}
</div>
<div>
  {{
    -1
  }}
</div>
<div>
  {{
    a
      ? 1
      : 2
  }}
</div>
<div>
  {{
    a(
      1
    )(
      2
    )
  }}
</div>
<div>
  {{
    a[
      b
    ]
  }}
</div>
<div>
  {{
    [
      1
    ]
  }}
</div>
<div>
  {{
    {
      a: 1
    }
  }}
</div>
<div>
  {{
    {
      a: 1
    }
  }}
</div>
<div>
  {{
    true
  }}
</div>
<div>
  {{
    undefined
  }}
</div>
<div>
  {{
    null
  }}
</div>
<div>
  {{
    1
  }}
</div>
<div>
  {{
    1
  }}
</div>
<div>
  {{
    "hello"
  }}
</div>
<div>
  {{
    a(
      1,
      2
    )
  }}
</div>
<div>
  {{
    a.b(
      1,
      2
    )
  }}
</div>
<div>
  {{
    x!
  }}
</div>
<div>
  {{
    !x
  }}
</div>
<div>
  {{
    a
  }}
</div>
<div>
  {{
    a
  }}
</div>
<div>
  {{
    a // hello
  }}
</div>
<div>
  {{
    a.b
  }}
</div>
<div>
  {{
    a?.b()
  }}
</div>
<div>
  {{
    a?.b
  }}
</div>
<div>
  {{
    a // hello
  }}
</div>
<label
  for="transmissionLayoutRadioButton"
  >{{
    "SearchSelection.transmissionLayoutRadioButton"
      | localize
        : localizationSection
  }}</label
>
<label
  for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton"
  >{{
    "SearchSelection.transmissionLayoutRadioButton"
      | localize
        : localizationSection
  }}</label
>
<label
  for="transmissionLayoutRadioButton"
  >{{
    "SearchSelection.transmissionLayoutRadioButton"
      | localize
        : localizationSection
  }}
</label>
<label
  for="transmissionLayoutRadioButton"
>
  {{
    "SearchSelection.transmissionLayoutRadioButton"
      | localize
        : localizationSection
  }}</label
>
<label
  for="transmissionLayoutRadioButton"
>
  {{
    "SearchSelection.transmissionLayoutRadioButton"
      | localize
        : localizationSection
  }}
</label>
<div
  class="Nemo possimus non voluptates dicta accusamus id quia"
>
  {{
    copyTypes[
      options
        .copyType
    ]
  }}
</div>
{{
  listRow.NextScheduledSendStatus ==
    1 ||
    listRow.NextScheduledSendStatus ==
      2 ||
    listRow.NextScheduledSendStatus ==
      3
}}
<span
  ><!--
  --><span
    >{{
      a
    }}</span
  ><!--
  --><span
    >{{
      b
    }}</span
  ><!--
--></span>

`;

exports[`real-world.component.html - angular-verify 1`] = `
<!-- copied from: https://stackblitz.com/angular/ymdjlgmlavo -->

<a id="toc"></a>
<h1>Template Syntax</h1>
<a href="#interpolation">Interpolation</a><br>
<a href="#expression-context">Expression context</a><br>
<a href="#statement-context">Statement context</a><br>
<a href="#mental-model">Mental Model</a><br>
<a href="#buttons">Buttons</a><br>
<a href="#prop-vs-attrib">Properties vs. Attributes</a><br>
<br>
<a href="#property-binding">Property Binding</a><br>
<div style="margin-left:8px">
  <a href="#attribute-binding">Attribute Binding</a><br>
  <a href="#class-binding">Class Binding</a><br>
  <a href="#style-binding">Style Binding</a><br>
</div>
<br>
<a href="#event-binding">Event Binding</a><br>
<a href="#two-way">Two-way Binding</a><br>
<br>
<div>Directives</div>
<div style="margin-left:8px">
  <a href="#ngModel">NgModel (two-way) Binding</a><br>
  <a href="#ngClass">NgClass Binding</a><br>
  <a href="#ngStyle">NgStyle Binding</a><br>
  <a href="#ngIf">NgIf</a><br>
  <a href="#ngFor">NgFor</a><br>
  <div style="margin-left:8px">
    <a href="#ngFor-index">NgFor with index</a><br>
    <a href="#ngFor-trackBy">NgFor with trackBy</a><br>
  </div>
  <a href="#ngSwitch">NgSwitch</a><br>
</div>
<br>
<a href="#ref-vars">Template reference variables</a><br>
<a href="#inputs-and-outputs">Inputs and outputs</a><br>
<a href="#pipes">Pipes</a><br>
<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
<a href="#non-null-assertion-operator">Non-null assertion operator <i>!.</i></a><br>
<a href="#enums">Enums</a><br>

<!-- Interpolation and expressions -->
<hr><h2 id="interpolation">Interpolation</h2>

<p>My current hero is {{currentHero.name}}</p>

<h3>
  {{title}}
  <img src="{{heroImageUrl}}" style="height:30px">
</h3>

<!-- "The sum of 1 + 1 is 2" -->
<p>The sum of 1 + 1 is {{1 + 1}}</p>

<!-- "The sum of 1 + 1 is not 4" -->
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>

<a class="to-toc" href="#toc">top</a>

<hr><h2 id="expression-context">Expression context</h2>

<p>Component expression context (&#123;&#123;title&#125;&#125;, [hidden]="isUnchanged")</p>
<div class="context">
  {{title}}
  <span [hidden]="isUnchanged">changed</span>
</div>


<p>Template input variable expression context (let hero)</p>
<!-- template hides the following; plenty of examples later -->
<ng-template>
  <div *ngFor="let hero of heroes">{{hero.name}}</div>
</ng-template>

<p>Template reference variable expression context (#heroInput)</p>
<div (keyup)="0" class="context">
  Type something:
  <input #heroInput> {{heroInput.value}}
</div>

<a class="to-toc" href="#toc">top</a>

<hr><h2 id="statement-context">Statement context</h2>

<p>Component statement context ( (click)="onSave() )
<div class="context">
  <button (click)="deleteHero()">Delete hero</button>
</div>

<p>Template $event statement context</p>
<div class="context">
  <button (click)="onSave($event)">Save</button>
</div>

<p>Template input variable statement context (let hero)</p>
<!-- template hides the following; plenty of examples later -->
<div class="context">
  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
</div>

<p>Template reference variable statement context (#heroForm)</p>
<div class="context">
  <form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- New Mental Model -->
<hr><h2 id="mental-model">New Mental Model</h2>

<!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
<div class="special">Mental Model</div>
<img src="assets/images/hero.png">
<button disabled>Save</button>
<br><br>

<div>
  <!-- Normal HTML -->
  <div class="special">Mental Model</div>
  <!-- Wow! A new element! -->
  <app-hero-detail></app-hero-detail>
</div>
<br><br>

<div>
  <!-- Bind button disabled state to \`isUnchanged\` property -->
  <button [disabled]="isUnchanged">Save</button>
</div>
<br><br>

<div>
  <img [src]="heroImageUrl">
  <app-hero-detail [hero]="currentHero"></app-hero-detail>
  <div [ngClass]="{'special': isSpecial}"></div>
</div>
<br><br>

<button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
<div (myClick)="clicked=$event" clickable>click me</div>
{{clicked}}
<br><br>

<div>
  Hero Name:
  <input [(ngModel)]="name">
  {{name}}
</div>
<br><br>

<button [attr.aria-label]="help">help</button>
<br><br>

<div [class.special]="isSpecial">Special</div>
<br><br>

<button [style.color]="isSpecial ? 'red' : 'green'">
button</button>

<a class="to-toc" href="#toc">top</a>

<!-- property vs. attribute -->
<hr><h2 id="prop-vs-attrib">Property vs. Attribute (img examples)</h2>
<!-- examine the following <img> tag in the browser tools -->
<img src="images/ng-logo.png"
    [src]="heroImageUrl">

<br><br>

<img [src]="iconUrl"/>
<img bind-src="heroImageUrl"/>
<img [attr.src]="villainImageUrl"/>

<a class="to-toc" href="#toc">top</a>

<!-- buttons -->
<hr><h2 id="buttons">Buttons</h2>

<button>Enabled (but does nothing)</button>
<button disabled>Disabled</button>
<button disabled=false>Still disabled</button>
<br><br>
<button disabled>disabled by attribute</button>
<button [disabled]="isUnchanged">disabled by property binding</button>
<br><br>
<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
<button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>

<a class="to-toc" href="#toc">top</a>

<!-- property binding -->
<hr><h2 id="property-binding">Property Binding</h2>

<img [src]="heroImageUrl">
<button [disabled]="isUnchanged">Cancel is disabled</button>
<div [ngClass]="classes">[ngClass] binding to the classes property</div>
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<img bind-src="heroImageUrl">

<!-- ERROR: HeroDetailComponent.hero expects a
     Hero object, not the string "currentHero" -->
<div *ngIf="false">
  <app-hero-detail hero="currentHero"></app-hero-detail>
</div>
<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>

<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>

<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>

<!--
  Angular generates warnings for these two lines as it sanitizes them
  WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
 -->
<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
<p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>

<a class="to-toc" href="#toc">top</a>

<!-- attribute binding -->
<hr><h2 id="attribute-binding">Attribute Binding</h2>

<!--  create and set a colspan attribute -->
<table border=1>
  <!--  expression calculates colspan=2 -->
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>

  <!-- ERROR: There is no \`colspan\` property to set!
    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
  -->

  <tr><td>Five</td><td>Six</td></tr>
</table>

<br>
<!-- create and set an aria attribute for assistive technology -->
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
<br><br>

<!-- The following effects are not discussed in the chapter -->
<div>
  <!-- any use of [attr.disabled] creates the disabled attribute -->
  <button [attr.disabled]="isUnchanged">Disabled</button>

  <button [attr.disabled]="!isUnchanged">Disabled as well</button>

  <!-- we'd have to remove it with property binding -->
  <button disabled [disabled]="false">Enabled (but inert)</button>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- class binding -->
<hr><h2 id="class-binding">Class Binding</h2>

<!-- standard class attribute setting  -->
<div class="bad curly special">Bad curly special</div>

<!-- reset/override all class names with a binding  -->
<div class="bad curly special"
     [class]="badCurly">Bad curly</div>

<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

<!-- binding to \`class.special\` trumps the class attribute -->
<div class="special"
     [class.special]="!isSpecial">This one is not so special</div>

<div bind-class.special="isSpecial">This class binding is special too</div>

<a class="to-toc" href="#toc">top</a>

<!--style binding -->
<hr><h2 id="style-binding">Style Binding</h2>

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

<a class="to-toc" href="#toc">top</a>

<!-- event binding -->
<hr><h2 id="event-binding">Event Binding</h2>

<button (click)="onSave()">Save</button>

<button on-click="onSave()">On Save</button>

<div>
<!-- \`myClick\` is an event on the custom \`ClickDirective\` -->
<div (myClick)="clickMessage=$event" clickable>click with myClick</div>
{{clickMessage}}
</div>


<!-- binding to a nested component -->
<app-hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></app-hero-detail>
<br>

<app-big-hero-detail
    (deleteRequest)="deleteHero($event)"
    [hero]="currentHero">
</app-big-hero-detail>

<div class="parent-div" (click)="onClickMe($event)" clickable>Click me
  <div class="child-div">Click me too!</div>
</div>

<!-- Will save only once -->
<div (click)="onSave()" clickable>
  <button (click)="onSave($event)">Save, no propagation</button>
</div>

<!-- Will save twice -->
<div (click)="onSave()" clickable>
  <button (click)="onSave()">Save w/ propagation</button>
</div>

<a class="to-toc" href="#toc">top</a>

<hr><h2 id="two-way">Two-way Binding</h2>
<div id="two-way-1">
  <app-sizer [(size)]="fontSizePx"></app-sizer>
  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
  <label>FontSize (px): <input [(ngModel)]="fontSizePx"></label>
</div>
<br>
<div id="two-way-2">
  <h3>De-sugared two-way binding</h3>
  <app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- Two way data binding unwound;
    passing the changed display value to the event handler via \`$event\` -->
<hr><h2 id="ngModel">NgModel (two-way) Binding</h2>

<h3>Result: {{currentHero.name}}</h3>

<input [value]="currentHero.name"
       (input)="currentHero.name=$event.target.value" >
without NgModel
<br>
<input [(ngModel)]="currentHero.name">
[(ngModel)]
<br>
<input bindon-ngModel="currentHero.name">
bindon-ngModel
<br>
<input
  [ngModel]="currentHero.name"
  (ngModelChange)="currentHero.name=$event">
(ngModelChange)="...name=$event"
<br>
<input
  [ngModel]="currentHero.name"
  (ngModelChange)="setUppercaseName($event)">
(ngModelChange)="setUppercaseName($event)"

<a class="to-toc" href="#toc">top</a>

<!-- NgClass binding -->
<hr><h2 id="ngClass">NgClass Binding</h2>

<p>currentClasses is {{currentClasses | json}}</p>
<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>

<!-- not used in chapter -->
<br>
<label>saveable   <input type="checkbox" [(ngModel)]="canSave"></label> |
<label>modified:  <input type="checkbox" [value]="!isUnchanged" (change)="isUnchanged=!isUnchanged"></label> |
<label>special:   <input type="checkbox" [(ngModel)]="isSpecial"></label>
<button (click)="setCurrentClasses()">Refresh currentClasses</button>
<br><br>
<div [ngClass]="currentClasses">
  This div should be {{ canSave ? "": "not"}} saveable,
                  {{ isUnchanged ? "unchanged" : "modified" }} and,
                  {{ isSpecial ? "": "not"}} special after clicking "Refresh".</div>
<br><br>

<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>

<div class="bad curly special">Bad curly special</div>
<div [ngClass]="{'bad':false, 'curly':true, 'special':true}">Curly special</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgStyle binding -->
<hr><h2 id="ngStyle">NgStyle Binding</h2>

<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
  This div is x-large or smaller.
</div>

<h3>[ngStyle] binding to currentStyles - CSS property names</h3>
<p>currentStyles is {{currentStyles | json}}</p>
<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>

<!-- not used in chapter -->
<br>
<label>italic: <input type="checkbox" [(ngModel)]="canSave"></label> |
<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"></label> |
<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"></label>
<button (click)="setCurrentStyles()">Refresh currentStyles</button>
<br><br>
<div [ngStyle]="currentStyles">
  This div should be {{ canSave ? "italic": "plain"}},
                  {{ isUnchanged ? "normal weight" : "bold" }} and,
                  {{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgIf binding -->
<hr><h2 id="ngIf">NgIf Binding</h2>

<app-hero-detail *ngIf="isActive"></app-hero-detail>

<div *ngIf="currentHero">Hello, {{currentHero.name}}</div>
<div *ngIf="nullHero">Hello, {{nullHero.name}}</div>

<!-- NgIf binding with template (no *) -->

<ng-template [ngIf]="currentHero">Add {{currentHero.name}} with template</ng-template>

<!-- Does not show because isActive is false! -->
<div>Hero Detail removed from DOM (via template) because isActive is false</div>
<ng-template [ngIf]="isActive">
  <app-hero-detail></app-hero-detail>
</ng-template>

<!-- isSpecial is true -->
<div [class.hidden]="!isSpecial">Show with class</div>
<div [class.hidden]="isSpecial">Hide with class</div>

<!-- HeroDetail is in the DOM but hidden -->
<app-hero-detail [class.hidden]="isSpecial"></app-hero-detail>

<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
<div [style.display]="isSpecial ? 'none'  : 'block'">Hide with style</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgFor binding -->
<hr><h2 id="ngFor">NgFor Binding</h2>

<div class="box">
  <div *ngFor="let hero of heroes">{{hero.name}}</div>
</div>
<br>

<div class="box">
  <!-- *ngFor w/ hero-detail Component -->
  <app-hero-detail *ngFor="let hero of heroes" [hero]="hero"></app-hero-detail>
</div>

<a class="to-toc" href="#toc">top</a>

<h4 id="ngFor-index">*ngFor with index</h4>
<p>with <i>semi-colon</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
</div>

<p>with <i>comma</i> separator</p>
<div class="box">
  <!-- Ex: "1 - Hercules" -->
  <div *ngFor="let hero of heroes, let i=index">{{i + 1}} - {{hero.name}}</div>
</div>

<a class="to-toc" href="#toc">top</a>

<h4 id="ngFor-trackBy">*ngFor trackBy</h4>
<button (click)="resetHeroes()">Reset heroes</button>
<button (click)="changeIds()">Change ids</button>
<button (click)="clearTrackByCounts()">Clear counts</button>

<p><i>without</i> trackBy</p>
<div class="box">
  <div #noTrackBy *ngFor="let hero of heroes">({{hero.id}}) {{hero.name}}</div>

  <div id="noTrackByCnt" *ngIf="heroesNoTrackByCount" >
    Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
  </div>
</div>

<p>with trackBy</p>
<div class="box">
  <div #withTrackBy *ngFor="let hero of heroes; trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>

  <div id="withTrackByCnt" *ngIf="heroesWithTrackByCount">
    Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
  </div>
</div>

<br><br><br>

<p>with trackBy and <i>semi-colon</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
    ({{hero.id}}) {{hero.name}}
  </div>
</div>

<p>with trackBy and <i>comma</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes, trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
</div>

<p>with trackBy and <i>space</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
</div>

<p>with <i>generic</i> trackById function</p>
<div class="box">
  <div *ngFor="let hero of heroes, trackBy: trackById">({{hero.id}}) {{hero.name}}</div>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgSwitch binding -->
<hr><h2 id="ngSwitch">NgSwitch Binding</h2>

<p>Pick your favorite hero</p>
<div>
  <label *ngFor="let h of heroes">
    <input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h">{{h.name}}
  </label>
</div>

<div [ngSwitch]="currentHero.emotion">
  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></app-happy-hero>
  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></app-sad-hero>
  <app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
  <div *ngSwitchCase="'confused'">Are you as confused as {{currentHero.name}}?</div>
  <app-unknown-hero  *ngSwitchDefault           [hero]="currentHero"></app-unknown-hero>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- template reference variable -->
<hr><h2 id="ref-vars">Template reference variables</h2>

<input #phone placeholder="phone number">

<!-- lots of other elements -->

<!-- phone refers to the input element; pass its \`value\` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>

<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>

<!-- btn refers to the button element; show its disabled state -->
<button #btn disabled [innerHTML]="'disabled by attribute: '+btn.disabled"></button>

<h4>Example Form</h4>
<app-hero-form [hero]="currentHero"></app-hero-form>

<a class="to-toc" href="#toc">top</a>

<!-- inputs and output -->
<hr><h2 id="inputs-and-outputs">Inputs and Outputs</h2>

<img [src]="iconUrl"/>
<button (click)="onSave()">Save</button>

<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
</app-hero-detail>

<div (myClick)="clickMessage2=$event" clickable>myClick2</div>
{{clickMessage2}}

<a class="to-toc" href="#toc">top</a>

<!-- Pipes -->
<hr><h2 id="pipes">Pipes</h2>

<div>Title through uppercase pipe: {{title | uppercase}}</div>

<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
<div>
  Title through a pipe chain:
  {{title | uppercase | lowercase}}
</div>

<!-- pipe with configuration argument => "February 25, 1970" -->
<div>Birthdate: {{currentHero?.birthdate | date:'longDate'}}</div>

<div>{{currentHero | json}}</div>

<div>Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}</div>

<div>
  <!-- pipe price to USD and display the $ symbol -->
  <label>Price: </label>{{product.price | currency:'USD':true}}
</div>

<a class="to-toc" href="#toc">top</a>

<!-- Null values and the safe navigation operator -->
<hr><h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>

<div>
  The title is {{title}}
</div>

<div>
  The current hero's name is {{currentHero?.name}}
</div>

<div>
  The current hero's name is {{currentHero.name}}
</div>


<!--
The null hero's name is {{nullHero.name}}

See console log:
  TypeError: Cannot read property 'name' of null in [null]
-->

<!--No hero, div not displayed, no error -->
<div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>

<div>
The null hero's name is {{nullHero && nullHero.name}}
</div>

<div>
  <!-- No hero, no problem! -->
  The null hero's name is {{nullHero?.name}}
</div>


<a class="to-toc" href="#toc">top</a>

<!-- non-null assertion operator -->
<hr><h2 id="non-null-assertion-operator">Non-null assertion operator <i>!.</i></h2>

<div>
  <!--No hero, no text -->
  <div *ngIf="hero">
    The hero's name is {{hero!.name}}
  </div>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- non-null assertion operator -->
<hr><h2 id="any-type-cast-function">$any type cast function <i>$any( )</i>.</h2>

<div>
  <!-- Accessing an undeclared member -->
  <div>
    The hero's marker is {{$any(hero).marker}}
  </div>
</div>

<div>
  <!-- Accessing an undeclared member -->
  <div>
    Undeclared members is {{$any(this).member}}
  </div>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- TODO: discuss this in the Style binding section -->
<!-- enums in bindings -->
<hr><h2 id="enums">Enums in binding</h2>

<p>
  The name of the Color.Red enum is {{Color[Color.Red]}}.<br>
  The current color is {{Color[color]}} and its number is {{color}}.<br>
  <button [style.color]="Color[color]" (click)="colorToggle()">Enum Toggle</button>
</p>

<a class="to-toc" href="#toc">top</a>


<!-- 
Copyright 2017-2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

<div id="heroForm">
  <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
    <div class="form-group">
      <label for="name">Name
        <input class="form-control" name="name" required [(ngModel)]="hero.name">
      </label>
    </div>
    <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
  </form>
  <div [hidden]="!heroForm.form.valid">
    {{submitMessage}}
  </div>
</div>


<!-- 
Copyright 2017-2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!-- copied from: https://stackblitz.com/angular/ymdjlgmlavo -->

<a id="toc"></a>
<h1>Template Syntax</h1>
<a href="#interpolation">Interpolation</a><br />
<a href="#expression-context">Expression context</a><br />
<a href="#statement-context">Statement context</a><br />
<a href="#mental-model">Mental Model</a><br />
<a href="#buttons">Buttons</a><br />
<a href="#prop-vs-attrib">Properties vs. Attributes</a><br />
<br />
<a href="#property-binding">Property Binding</a><br />
<div style="margin-left:8px">
  <a href="#attribute-binding">Attribute Binding</a><br />
  <a href="#class-binding">Class Binding</a><br />
  <a href="#style-binding">Style Binding</a><br />
</div>
<br />
<a href="#event-binding">Event Binding</a><br />
<a href="#two-way">Two-way Binding</a><br />
<br />
<div>Directives</div>
<div style="margin-left:8px">
  <a href="#ngModel">NgModel (two-way) Binding</a><br />
  <a href="#ngClass">NgClass Binding</a><br />
  <a href="#ngStyle">NgStyle Binding</a><br />
  <a href="#ngIf">NgIf</a><br />
  <a href="#ngFor">NgFor</a><br />
  <div style="margin-left:8px">
    <a href="#ngFor-index">NgFor with index</a><br />
    <a href="#ngFor-trackBy">NgFor with trackBy</a><br />
  </div>
  <a href="#ngSwitch">NgSwitch</a><br />
</div>
<br />
<a href="#ref-vars">Template reference variables</a><br />
<a href="#inputs-and-outputs">Inputs and outputs</a><br />
<a href="#pipes">Pipes</a><br />
<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a
><br />
<a href="#non-null-assertion-operator">Non-null assertion operator <i>!.</i></a
><br />
<a href="#enums">Enums</a><br />

<!-- Interpolation and expressions -->
<hr />
<h2 id="interpolation">Interpolation</h2>

<p>My current hero is {{ currentHero.name }}</p>

<h3>{{ title }} <img src="{{heroImageUrl}}" style="height:30px" /></h3>

<!-- "The sum of 1 + 1 is 2" -->
<p>The sum of 1 + 1 is {{ 1 + 1 }}</p>

<!-- "The sum of 1 + 1 is not 4" -->
<p>The sum of 1 + 1 is not {{ 1 + 1 + getVal() }}</p>

<a class="to-toc" href="#toc">top</a>

<hr />
<h2 id="expression-context">Expression context</h2>

<p>
  Component expression context (&#123;&#123;title&#125;&#125;,
  [hidden]="isUnchanged")
</p>
<div class="context">
  {{ title }} <span [hidden]="isUnchanged">changed</span>
</div>

<p>Template input variable expression context (let hero)</p>
<!-- template hides the following; plenty of examples later -->
<ng-template>
  <div *ngFor="let hero of heroes">{{ hero.name }}</div>
</ng-template>

<p>Template reference variable expression context (#heroInput)</p>
<div (keyup)="(0)" class="context">
  Type something: <input #heroInput /> {{ heroInput.value }}
</div>

<a class="to-toc" href="#toc">top</a>

<hr />
<h2 id="statement-context">Statement context</h2>

<p>Component statement context ( (click)="onSave() )</p>
<div class="context"><button (click)="deleteHero()">Delete hero</button></div>

<p>Template $event statement context</p>
<div class="context"><button (click)="onSave($event)">Save</button></div>

<p>Template input variable statement context (let hero)</p>
<!-- template hides the following; plenty of examples later -->
<div class="context">
  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">
    {{ hero.name }}
  </button>
</div>

<p>Template reference variable statement context (#heroForm)</p>
<div class="context">
  <form #heroForm (ngSubmit)="onSubmit(heroForm)">...</form>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- New Mental Model -->
<hr />
<h2 id="mental-model">New Mental Model</h2>

<!--
  <img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">
-->
<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
<div class="special">Mental Model</div>
<img src="assets/images/hero.png" /> <button disabled>Save</button> <br /><br />

<div>
  <!-- Normal HTML -->
  <div class="special">Mental Model</div>
  <!-- Wow! A new element! -->
  <app-hero-detail></app-hero-detail>
</div>
<br /><br />

<div>
  <!-- Bind button disabled state to \`isUnchanged\` property -->
  <button [disabled]="isUnchanged">Save</button>
</div>
<br /><br />

<div>
  <img [src]="heroImageUrl" />
  <app-hero-detail [hero]="currentHero"></app-hero-detail>
  <div [ngClass]="{ special: isSpecial }"></div>
</div>
<br /><br />

<button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
<div (myClick)="clicked = $event" clickable>click me</div>
{{ clicked }} <br /><br />

<div>Hero Name: <input [(ngModel)]="name" /> {{ name }}</div>
<br /><br />

<button [attr.aria-label]="help">help</button> <br /><br />

<div [class.special]="isSpecial">Special</div>
<br /><br />

<button [style.color]="isSpecial ? 'red' : 'green'">button</button>

<a class="to-toc" href="#toc">top</a>

<!-- property vs. attribute -->
<hr />
<h2 id="prop-vs-attrib">Property vs. Attribute (img examples)</h2>
<!-- examine the following <img> tag in the browser tools -->
<img src="images/ng-logo.png" [src]="heroImageUrl" />

<br /><br />

<img [src]="iconUrl" /> <img bind-src="heroImageUrl" />
<img [attr.src]="villainImageUrl" />

<a class="to-toc" href="#toc">top</a>

<!-- buttons -->
<hr />
<h2 id="buttons">Buttons</h2>

<button>Enabled (but does nothing)</button> <button disabled>Disabled</button>
<button disabled="false">Still disabled</button> <br /><br />
<button disabled>disabled by attribute</button>
<button [disabled]="isUnchanged">disabled by property binding</button>
<br /><br />
<button bind-disabled="isUnchanged" on-click="onSave($event)">
  Disabled Cancel
</button>
<button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>

<a class="to-toc" href="#toc">top</a>

<!-- property binding -->
<hr />
<h2 id="property-binding">Property Binding</h2>

<img [src]="heroImageUrl" />
<button [disabled]="isUnchanged">Cancel is disabled</button>
<div [ngClass]="classes">[ngClass] binding to the classes property</div>
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<img bind-src="heroImageUrl" />

<!--
  ERROR: HeroDetailComponent.hero expects a
  Hero object, not the string "currentHero"
-->
<div *ngIf="false"><app-hero-detail hero="currentHero"></app-hero-detail></div>
<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>

<p><img src="{{heroImageUrl}}" /> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl" /> is the <i>property bound</i> image.</p>

<p>
  <span>"{{ title }}" is the <i>interpolated</i> title.</span>
</p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>

<!--
  Angular generates warnings for these two lines as it sanitizes them
  WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
-->
<p>
  <span>"{{ evilTitle }}" is the <i>interpolated</i> evil title.</span>
</p>
<p>
  "<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil
  title.
</p>

<a class="to-toc" href="#toc">top</a>

<!-- attribute binding -->
<hr />
<h2 id="attribute-binding">Attribute Binding</h2>

<!-- create and set a colspan attribute -->
<table border="1">
  <!-- expression calculates colspan=2 -->
  <tr>
    <td [attr.colspan]="1 + 1">One-Two</td>
  </tr>

  <!--
    ERROR: There is no \`colspan\` property to set!
    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
  -->

  <tr>
    <td>Five</td>
    <td>Six</td>
  </tr>
</table>

<br />
<!-- create and set an aria attribute for assistive technology -->
<button [attr.aria-label]="actionName">{{ actionName }} with Aria</button>
<br /><br />

<!-- The following effects are not discussed in the chapter -->
<div>
  <!-- any use of [attr.disabled] creates the disabled attribute -->
  <button [attr.disabled]="isUnchanged">Disabled</button>

  <button [attr.disabled]="!isUnchanged">Disabled as well</button>

  <!-- we'd have to remove it with property binding -->
  <button disabled [disabled]="false">Enabled (but inert)</button>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- class binding -->
<hr />
<h2 id="class-binding">Class Binding</h2>

<!-- standard class attribute setting -->
<div class="bad curly special">Bad curly special</div>

<!-- reset/override all class names with a binding -->
<div class="bad curly special" [class]="badCurly">Bad curly</div>

<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

<!-- binding to \`class.special\` trumps the class attribute -->
<div class="special" [class.special]="!isSpecial">
  This one is not so special
</div>

<div bind-class.special="isSpecial">This class binding is special too</div>

<a class="to-toc" href="#toc">top</a>

<!-- style binding -->
<hr />
<h2 id="style-binding">Style Binding</h2>

<button [style.color]="isSpecial ? 'red' : 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan' : 'grey'">Save</button>

<button [style.font-size.em]="isSpecial ? 3 : 1">Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50">Small</button>

<a class="to-toc" href="#toc">top</a>

<!-- event binding -->
<hr />
<h2 id="event-binding">Event Binding</h2>

<button (click)="onSave()">Save</button>

<button on-click="onSave()">On Save</button>

<div>
  <!-- \`myClick\` is an event on the custom \`ClickDirective\` -->
  <div (myClick)="clickMessage = $event" clickable>click with myClick</div>
  {{ clickMessage }}
</div>

<!-- binding to a nested component -->
<app-hero-detail
  (deleteRequest)="deleteHero($event)"
  [hero]="currentHero"
></app-hero-detail>
<br />

<app-big-hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero">
</app-big-hero-detail>

<div class="parent-div" (click)="onClickMe($event)" clickable>
  Click me
  <div class="child-div">Click me too!</div>
</div>

<!-- Will save only once -->
<div (click)="onSave()" clickable>
  <button (click)="onSave($event)">Save, no propagation</button>
</div>

<!-- Will save twice -->
<div (click)="onSave()" clickable>
  <button (click)="onSave()">Save w/ propagation</button>
</div>

<a class="to-toc" href="#toc">top</a>

<hr />
<h2 id="two-way">Two-way Binding</h2>
<div id="two-way-1">
  <app-sizer [(size)]="fontSizePx"></app-sizer>
  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
  <label>FontSize (px): <input [(ngModel)]="fontSizePx"/></label>
</div>
<br />
<div id="two-way-2">
  <h3>De-sugared two-way binding</h3>
  <app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx = $event"></app-sizer>
</div>

<a class="to-toc" href="#toc">top</a>

<!--
  Two way data binding unwound;
  passing the changed display value to the event handler via \`$event\`
-->
<hr />
<h2 id="ngModel">NgModel (two-way) Binding</h2>

<h3>Result: {{ currentHero.name }}</h3>

<input
  [value]="currentHero.name"
  (input)="currentHero.name = $event.target.value"
/>
without NgModel <br />
<input [(ngModel)]="currentHero.name" /> [(ngModel)] <br />
<input bindon-ngModel="currentHero.name" /> bindon-ngModel <br />
<input
  [ngModel]="currentHero.name"
  (ngModelChange)="currentHero.name = $event"
/>
(ngModelChange)="...name=$event" <br />
<input
  [ngModel]="currentHero.name"
  (ngModelChange)="setUppercaseName($event)"
/>
(ngModelChange)="setUppercaseName($event)"

<a class="to-toc" href="#toc">top</a>

<!-- NgClass binding -->
<hr />
<h2 id="ngClass">NgClass Binding</h2>

<p>currentClasses is {{ currentClasses | json }}</p>
<div [ngClass]="currentClasses">
  This div is initially saveable, unchanged, and special
</div>

<!-- not used in chapter -->
<br />
<label>saveable <input type="checkbox" [(ngModel)]="canSave"/></label> |
<label
  >modified:
  <input
    type="checkbox"
    [value]="!isUnchanged"
    (change)="isUnchanged = !isUnchanged"
/></label>
| <label>special: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
<button (click)="setCurrentClasses()">Refresh currentClasses</button>
<br /><br />
<div [ngClass]="currentClasses">
  This div should be {{ canSave ? "" : "not" }} saveable,
  {{ isUnchanged ? "unchanged" : "modified" }} and,
  {{ isSpecial ? "" : "not" }} special after clicking "Refresh".
</div>
<br /><br />

<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>

<div class="bad curly special">Bad curly special</div>
<div [ngClass]="{ bad: false, curly: true, special: true }">Curly special</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgStyle binding -->
<hr />
<h2 id="ngStyle">NgStyle Binding</h2>

<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'">
  This div is x-large or smaller.
</div>

<h3>[ngStyle] binding to currentStyles - CSS property names</h3>
<p>currentStyles is {{ currentStyles | json }}</p>
<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>

<!-- not used in chapter -->
<br />
<label>italic: <input type="checkbox" [(ngModel)]="canSave"/></label> |
<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"/></label> |
<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
<button (click)="setCurrentStyles()">Refresh currentStyles</button> <br /><br />
<div [ngStyle]="currentStyles">
  This div should be {{ canSave ? "italic" : "plain" }},
  {{ isUnchanged ? "normal weight" : "bold" }} and,
  {{ isSpecial ? "extra large" : "normal size" }} after clicking "Refresh".
</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgIf binding -->
<hr />
<h2 id="ngIf">NgIf Binding</h2>

<app-hero-detail *ngIf="isActive"></app-hero-detail>

<div *ngIf="currentHero">Hello, {{ currentHero.name }}</div>
<div *ngIf="nullHero">Hello, {{ nullHero.name }}</div>

<!-- NgIf binding with template (no *) -->

<ng-template [ngIf]="currentHero"
  >Add {{ currentHero.name }} with template</ng-template
>

<!-- Does not show because isActive is false! -->
<div>Hero Detail removed from DOM (via template) because isActive is false</div>
<ng-template [ngIf]="isActive">
  <app-hero-detail></app-hero-detail>
</ng-template>

<!-- isSpecial is true -->
<div [class.hidden]="!isSpecial">Show with class</div>
<div [class.hidden]="isSpecial">Hide with class</div>

<!-- HeroDetail is in the DOM but hidden -->
<app-hero-detail [class.hidden]="isSpecial"></app-hero-detail>

<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
<div [style.display]="isSpecial ? 'none' : 'block'">Hide with style</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgFor binding -->
<hr />
<h2 id="ngFor">NgFor Binding</h2>

<div class="box">
  <div *ngFor="let hero of heroes">{{ hero.name }}</div>
</div>
<br />

<div class="box">
  <!-- *ngFor w/ hero-detail Component -->
  <app-hero-detail *ngFor="let hero of heroes" [hero]="hero"></app-hero-detail>
</div>

<a class="to-toc" href="#toc">top</a>

<h4 id="ngFor-index">*ngFor with index</h4>
<p>with <i>semi-colon</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes; let i = index">
    {{ i + 1 }} - {{ hero.name }}
  </div>
</div>

<p>with <i>comma</i> separator</p>
<div class="box">
  <!-- Ex: "1 - Hercules" -->
  <div *ngFor="let hero of heroes; let i = index">
    {{ i + 1 }} - {{ hero.name }}
  </div>
</div>

<a class="to-toc" href="#toc">top</a>

<h4 id="ngFor-trackBy">*ngFor trackBy</h4>
<button (click)="resetHeroes()">Reset heroes</button>
<button (click)="changeIds()">Change ids</button>
<button (click)="clearTrackByCounts()">Clear counts</button>

<p><i>without</i> trackBy</p>
<div class="box">
  <div #noTrackBy *ngFor="let hero of heroes">
    ({{ hero.id }}) {{ hero.name }}
  </div>

  <div id="noTrackByCnt" *ngIf="heroesNoTrackByCount">
    Hero DOM elements change #{{ heroesNoTrackByCount }} without trackBy
  </div>
</div>

<p>with trackBy</p>
<div class="box">
  <div #withTrackBy *ngFor="let hero of heroes; trackBy: trackByHeroes">
    ({{ hero.id }}) {{ hero.name }}
  </div>

  <div id="withTrackByCnt" *ngIf="heroesWithTrackByCount">
    Hero DOM elements change #{{ heroesWithTrackByCount }} with trackBy
  </div>
</div>

<br /><br /><br />

<p>with trackBy and <i>semi-colon</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
    ({{ hero.id }}) {{ hero.name }}
  </div>
</div>

<p>with trackBy and <i>comma</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
    ({{ hero.id }}) {{ hero.name }}
  </div>
</div>

<p>with trackBy and <i>space</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
    ({{ hero.id }}) {{ hero.name }}
  </div>
</div>

<p>with <i>generic</i> trackById function</p>
<div class="box">
  <div *ngFor="let hero of heroes; trackBy: trackById">
    ({{ hero.id }}) {{ hero.name }}
  </div>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgSwitch binding -->
<hr />
<h2 id="ngSwitch">NgSwitch Binding</h2>

<p>Pick your favorite hero</p>
<div>
  <label *ngFor="let h of heroes">
    <input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h" />{{
      h.name
    }}
  </label>
</div>

<div [ngSwitch]="currentHero.emotion">
  <app-happy-hero *ngSwitchCase="'happy'" [hero]="currentHero"></app-happy-hero>
  <app-sad-hero *ngSwitchCase="'sad'" [hero]="currentHero"></app-sad-hero>
  <app-confused-hero
    *ngSwitchCase="'confused'"
    [hero]="currentHero"
  ></app-confused-hero>
  <div *ngSwitchCase="'confused'">
    Are you as confused as {{ currentHero.name }}?
  </div>
  <app-unknown-hero *ngSwitchDefault [hero]="currentHero"></app-unknown-hero>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- template reference variable -->
<hr />
<h2 id="ref-vars">Template reference variables</h2>

<input #phone placeholder="phone number" />

<!-- lots of other elements -->

<!-- phone refers to the input element; pass its \`value\` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>

<input ref-fax placeholder="fax number" />
<button (click)="callFax(fax.value)">Fax</button>

<!-- btn refers to the button element; show its disabled state -->
<button
  #btn
  disabled
  [innerHTML]="'disabled by attribute: ' + btn.disabled"
></button>

<h4>Example Form</h4>
<app-hero-form [hero]="currentHero"></app-hero-form>

<a class="to-toc" href="#toc">top</a>

<!-- inputs and output -->
<hr />
<h2 id="inputs-and-outputs">Inputs and Outputs</h2>

<img [src]="iconUrl" /> <button (click)="onSave()">Save</button>

<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
</app-hero-detail>

<div (myClick)="clickMessage2 = $event" clickable>myClick2</div>
{{ clickMessage2 }}

<a class="to-toc" href="#toc">top</a>

<!-- Pipes -->
<hr />
<h2 id="pipes">Pipes</h2>

<div>Title through uppercase pipe: {{ title | uppercase }}</div>

<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
<div>Title through a pipe chain: {{ title | uppercase | lowercase }}</div>

<!-- pipe with configuration argument => "February 25, 1970" -->
<div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>

<div>{{ currentHero | json }}</div>

<div>
  Birthdate: {{ currentHero?.birthdate | date: "longDate" | uppercase }}
</div>

<div>
  <!-- pipe price to USD and display the $ symbol -->
  <label>Price: </label>{{ product.price | currency: "USD":true }}
</div>

<a class="to-toc" href="#toc">top</a>

<!-- Null values and the safe navigation operator -->
<hr />
<h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>

<div>The title is {{ title }}</div>

<div>The current hero's name is {{ currentHero?.name }}</div>

<div>The current hero's name is {{ currentHero.name }}</div>

<!--
  The null hero's name is {{nullHero.name}}

  See console log:
    TypeError: Cannot read property 'name' of null in [null]
-->

<!-- No hero, div not displayed, no error -->
<div *ngIf="nullHero">The null hero's name is {{ nullHero.name }}</div>

<div>The null hero's name is {{ nullHero && nullHero.name }}</div>

<div>
  <!-- No hero, no problem! -->
  The null hero's name is {{ nullHero?.name }}
</div>

<a class="to-toc" href="#toc">top</a>

<!-- non-null assertion operator -->
<hr />
<h2 id="non-null-assertion-operator">Non-null assertion operator <i>!.</i></h2>

<div>
  <!-- No hero, no text -->
  <div *ngIf="hero">The hero's name is {{ hero!.name }}</div>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- non-null assertion operator -->
<hr />
<h2 id="any-type-cast-function">$any type cast function <i>$any( )</i>.</h2>

<div>
  <!-- Accessing an undeclared member -->
  <div>The hero's marker is {{ $any(hero).marker }}</div>
</div>

<div>
  <!-- Accessing an undeclared member -->
  <div>Undeclared members is {{$any(this).member}}</div>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- TODO: discuss this in the Style binding section -->
<!-- enums in bindings -->
<hr />
<h2 id="enums">Enums in binding</h2>

<p>
  The name of the Color.Red enum is {{ Color[Color.Red] }}.<br />
  The current color is {{ Color[color] }} and its number is {{ color }}.<br />
  <button [style.color]="Color[color]" (click)="colorToggle()">
    Enum Toggle
  </button>
</p>

<a class="to-toc" href="#toc">top</a>

<!--
  Copyright 2017-2018 Google Inc. All Rights Reserved.
  Use of this source code is governed by an MIT-style license that
  can be found in the LICENSE file at http://angular.io/license
-->

<div id="heroForm">
  <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
    <div class="form-group">
      <label for="name"
        >Name
        <input
          class="form-control"
          name="name"
          required
          [(ngModel)]="hero.name"
        />
      </label>
    </div>
    <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
  </form>
  <div [hidden]="!heroForm.form.valid">{{ submitMessage }}</div>
</div>

<!--
  Copyright 2017-2018 Google Inc. All Rights Reserved.
  Use of this source code is governed by an MIT-style license that
  can be found in the LICENSE file at http://angular.io/license
-->

`;

exports[`real-world.component.html - angular-verify 2`] = `
<!-- copied from: https://stackblitz.com/angular/ymdjlgmlavo -->

<a id="toc"></a>
<h1>Template Syntax</h1>
<a href="#interpolation">Interpolation</a><br>
<a href="#expression-context">Expression context</a><br>
<a href="#statement-context">Statement context</a><br>
<a href="#mental-model">Mental Model</a><br>
<a href="#buttons">Buttons</a><br>
<a href="#prop-vs-attrib">Properties vs. Attributes</a><br>
<br>
<a href="#property-binding">Property Binding</a><br>
<div style="margin-left:8px">
  <a href="#attribute-binding">Attribute Binding</a><br>
  <a href="#class-binding">Class Binding</a><br>
  <a href="#style-binding">Style Binding</a><br>
</div>
<br>
<a href="#event-binding">Event Binding</a><br>
<a href="#two-way">Two-way Binding</a><br>
<br>
<div>Directives</div>
<div style="margin-left:8px">
  <a href="#ngModel">NgModel (two-way) Binding</a><br>
  <a href="#ngClass">NgClass Binding</a><br>
  <a href="#ngStyle">NgStyle Binding</a><br>
  <a href="#ngIf">NgIf</a><br>
  <a href="#ngFor">NgFor</a><br>
  <div style="margin-left:8px">
    <a href="#ngFor-index">NgFor with index</a><br>
    <a href="#ngFor-trackBy">NgFor with trackBy</a><br>
  </div>
  <a href="#ngSwitch">NgSwitch</a><br>
</div>
<br>
<a href="#ref-vars">Template reference variables</a><br>
<a href="#inputs-and-outputs">Inputs and outputs</a><br>
<a href="#pipes">Pipes</a><br>
<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
<a href="#non-null-assertion-operator">Non-null assertion operator <i>!.</i></a><br>
<a href="#enums">Enums</a><br>

<!-- Interpolation and expressions -->
<hr><h2 id="interpolation">Interpolation</h2>

<p>My current hero is {{currentHero.name}}</p>

<h3>
  {{title}}
  <img src="{{heroImageUrl}}" style="height:30px">
</h3>

<!-- "The sum of 1 + 1 is 2" -->
<p>The sum of 1 + 1 is {{1 + 1}}</p>

<!-- "The sum of 1 + 1 is not 4" -->
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>

<a class="to-toc" href="#toc">top</a>

<hr><h2 id="expression-context">Expression context</h2>

<p>Component expression context (&#123;&#123;title&#125;&#125;, [hidden]="isUnchanged")</p>
<div class="context">
  {{title}}
  <span [hidden]="isUnchanged">changed</span>
</div>


<p>Template input variable expression context (let hero)</p>
<!-- template hides the following; plenty of examples later -->
<ng-template>
  <div *ngFor="let hero of heroes">{{hero.name}}</div>
</ng-template>

<p>Template reference variable expression context (#heroInput)</p>
<div (keyup)="0" class="context">
  Type something:
  <input #heroInput> {{heroInput.value}}
</div>

<a class="to-toc" href="#toc">top</a>

<hr><h2 id="statement-context">Statement context</h2>

<p>Component statement context ( (click)="onSave() )
<div class="context">
  <button (click)="deleteHero()">Delete hero</button>
</div>

<p>Template $event statement context</p>
<div class="context">
  <button (click)="onSave($event)">Save</button>
</div>

<p>Template input variable statement context (let hero)</p>
<!-- template hides the following; plenty of examples later -->
<div class="context">
  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
</div>

<p>Template reference variable statement context (#heroForm)</p>
<div class="context">
  <form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- New Mental Model -->
<hr><h2 id="mental-model">New Mental Model</h2>

<!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
<div class="special">Mental Model</div>
<img src="assets/images/hero.png">
<button disabled>Save</button>
<br><br>

<div>
  <!-- Normal HTML -->
  <div class="special">Mental Model</div>
  <!-- Wow! A new element! -->
  <app-hero-detail></app-hero-detail>
</div>
<br><br>

<div>
  <!-- Bind button disabled state to \`isUnchanged\` property -->
  <button [disabled]="isUnchanged">Save</button>
</div>
<br><br>

<div>
  <img [src]="heroImageUrl">
  <app-hero-detail [hero]="currentHero"></app-hero-detail>
  <div [ngClass]="{'special': isSpecial}"></div>
</div>
<br><br>

<button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
<div (myClick)="clicked=$event" clickable>click me</div>
{{clicked}}
<br><br>

<div>
  Hero Name:
  <input [(ngModel)]="name">
  {{name}}
</div>
<br><br>

<button [attr.aria-label]="help">help</button>
<br><br>

<div [class.special]="isSpecial">Special</div>
<br><br>

<button [style.color]="isSpecial ? 'red' : 'green'">
button</button>

<a class="to-toc" href="#toc">top</a>

<!-- property vs. attribute -->
<hr><h2 id="prop-vs-attrib">Property vs. Attribute (img examples)</h2>
<!-- examine the following <img> tag in the browser tools -->
<img src="images/ng-logo.png"
    [src]="heroImageUrl">

<br><br>

<img [src]="iconUrl"/>
<img bind-src="heroImageUrl"/>
<img [attr.src]="villainImageUrl"/>

<a class="to-toc" href="#toc">top</a>

<!-- buttons -->
<hr><h2 id="buttons">Buttons</h2>

<button>Enabled (but does nothing)</button>
<button disabled>Disabled</button>
<button disabled=false>Still disabled</button>
<br><br>
<button disabled>disabled by attribute</button>
<button [disabled]="isUnchanged">disabled by property binding</button>
<br><br>
<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
<button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>

<a class="to-toc" href="#toc">top</a>

<!-- property binding -->
<hr><h2 id="property-binding">Property Binding</h2>

<img [src]="heroImageUrl">
<button [disabled]="isUnchanged">Cancel is disabled</button>
<div [ngClass]="classes">[ngClass] binding to the classes property</div>
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<img bind-src="heroImageUrl">

<!-- ERROR: HeroDetailComponent.hero expects a
     Hero object, not the string "currentHero" -->
<div *ngIf="false">
  <app-hero-detail hero="currentHero"></app-hero-detail>
</div>
<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>

<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>

<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>

<!--
  Angular generates warnings for these two lines as it sanitizes them
  WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
 -->
<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
<p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>

<a class="to-toc" href="#toc">top</a>

<!-- attribute binding -->
<hr><h2 id="attribute-binding">Attribute Binding</h2>

<!--  create and set a colspan attribute -->
<table border=1>
  <!--  expression calculates colspan=2 -->
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>

  <!-- ERROR: There is no \`colspan\` property to set!
    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
  -->

  <tr><td>Five</td><td>Six</td></tr>
</table>

<br>
<!-- create and set an aria attribute for assistive technology -->
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
<br><br>

<!-- The following effects are not discussed in the chapter -->
<div>
  <!-- any use of [attr.disabled] creates the disabled attribute -->
  <button [attr.disabled]="isUnchanged">Disabled</button>

  <button [attr.disabled]="!isUnchanged">Disabled as well</button>

  <!-- we'd have to remove it with property binding -->
  <button disabled [disabled]="false">Enabled (but inert)</button>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- class binding -->
<hr><h2 id="class-binding">Class Binding</h2>

<!-- standard class attribute setting  -->
<div class="bad curly special">Bad curly special</div>

<!-- reset/override all class names with a binding  -->
<div class="bad curly special"
     [class]="badCurly">Bad curly</div>

<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

<!-- binding to \`class.special\` trumps the class attribute -->
<div class="special"
     [class.special]="!isSpecial">This one is not so special</div>

<div bind-class.special="isSpecial">This class binding is special too</div>

<a class="to-toc" href="#toc">top</a>

<!--style binding -->
<hr><h2 id="style-binding">Style Binding</h2>

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

<a class="to-toc" href="#toc">top</a>

<!-- event binding -->
<hr><h2 id="event-binding">Event Binding</h2>

<button (click)="onSave()">Save</button>

<button on-click="onSave()">On Save</button>

<div>
<!-- \`myClick\` is an event on the custom \`ClickDirective\` -->
<div (myClick)="clickMessage=$event" clickable>click with myClick</div>
{{clickMessage}}
</div>


<!-- binding to a nested component -->
<app-hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></app-hero-detail>
<br>

<app-big-hero-detail
    (deleteRequest)="deleteHero($event)"
    [hero]="currentHero">
</app-big-hero-detail>

<div class="parent-div" (click)="onClickMe($event)" clickable>Click me
  <div class="child-div">Click me too!</div>
</div>

<!-- Will save only once -->
<div (click)="onSave()" clickable>
  <button (click)="onSave($event)">Save, no propagation</button>
</div>

<!-- Will save twice -->
<div (click)="onSave()" clickable>
  <button (click)="onSave()">Save w/ propagation</button>
</div>

<a class="to-toc" href="#toc">top</a>

<hr><h2 id="two-way">Two-way Binding</h2>
<div id="two-way-1">
  <app-sizer [(size)]="fontSizePx"></app-sizer>
  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
  <label>FontSize (px): <input [(ngModel)]="fontSizePx"></label>
</div>
<br>
<div id="two-way-2">
  <h3>De-sugared two-way binding</h3>
  <app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- Two way data binding unwound;
    passing the changed display value to the event handler via \`$event\` -->
<hr><h2 id="ngModel">NgModel (two-way) Binding</h2>

<h3>Result: {{currentHero.name}}</h3>

<input [value]="currentHero.name"
       (input)="currentHero.name=$event.target.value" >
without NgModel
<br>
<input [(ngModel)]="currentHero.name">
[(ngModel)]
<br>
<input bindon-ngModel="currentHero.name">
bindon-ngModel
<br>
<input
  [ngModel]="currentHero.name"
  (ngModelChange)="currentHero.name=$event">
(ngModelChange)="...name=$event"
<br>
<input
  [ngModel]="currentHero.name"
  (ngModelChange)="setUppercaseName($event)">
(ngModelChange)="setUppercaseName($event)"

<a class="to-toc" href="#toc">top</a>

<!-- NgClass binding -->
<hr><h2 id="ngClass">NgClass Binding</h2>

<p>currentClasses is {{currentClasses | json}}</p>
<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>

<!-- not used in chapter -->
<br>
<label>saveable   <input type="checkbox" [(ngModel)]="canSave"></label> |
<label>modified:  <input type="checkbox" [value]="!isUnchanged" (change)="isUnchanged=!isUnchanged"></label> |
<label>special:   <input type="checkbox" [(ngModel)]="isSpecial"></label>
<button (click)="setCurrentClasses()">Refresh currentClasses</button>
<br><br>
<div [ngClass]="currentClasses">
  This div should be {{ canSave ? "": "not"}} saveable,
                  {{ isUnchanged ? "unchanged" : "modified" }} and,
                  {{ isSpecial ? "": "not"}} special after clicking "Refresh".</div>
<br><br>

<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>

<div class="bad curly special">Bad curly special</div>
<div [ngClass]="{'bad':false, 'curly':true, 'special':true}">Curly special</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgStyle binding -->
<hr><h2 id="ngStyle">NgStyle Binding</h2>

<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
  This div is x-large or smaller.
</div>

<h3>[ngStyle] binding to currentStyles - CSS property names</h3>
<p>currentStyles is {{currentStyles | json}}</p>
<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>

<!-- not used in chapter -->
<br>
<label>italic: <input type="checkbox" [(ngModel)]="canSave"></label> |
<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"></label> |
<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"></label>
<button (click)="setCurrentStyles()">Refresh currentStyles</button>
<br><br>
<div [ngStyle]="currentStyles">
  This div should be {{ canSave ? "italic": "plain"}},
                  {{ isUnchanged ? "normal weight" : "bold" }} and,
                  {{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgIf binding -->
<hr><h2 id="ngIf">NgIf Binding</h2>

<app-hero-detail *ngIf="isActive"></app-hero-detail>

<div *ngIf="currentHero">Hello, {{currentHero.name}}</div>
<div *ngIf="nullHero">Hello, {{nullHero.name}}</div>

<!-- NgIf binding with template (no *) -->

<ng-template [ngIf]="currentHero">Add {{currentHero.name}} with template</ng-template>

<!-- Does not show because isActive is false! -->
<div>Hero Detail removed from DOM (via template) because isActive is false</div>
<ng-template [ngIf]="isActive">
  <app-hero-detail></app-hero-detail>
</ng-template>

<!-- isSpecial is true -->
<div [class.hidden]="!isSpecial">Show with class</div>
<div [class.hidden]="isSpecial">Hide with class</div>

<!-- HeroDetail is in the DOM but hidden -->
<app-hero-detail [class.hidden]="isSpecial"></app-hero-detail>

<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
<div [style.display]="isSpecial ? 'none'  : 'block'">Hide with style</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgFor binding -->
<hr><h2 id="ngFor">NgFor Binding</h2>

<div class="box">
  <div *ngFor="let hero of heroes">{{hero.name}}</div>
</div>
<br>

<div class="box">
  <!-- *ngFor w/ hero-detail Component -->
  <app-hero-detail *ngFor="let hero of heroes" [hero]="hero"></app-hero-detail>
</div>

<a class="to-toc" href="#toc">top</a>

<h4 id="ngFor-index">*ngFor with index</h4>
<p>with <i>semi-colon</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
</div>

<p>with <i>comma</i> separator</p>
<div class="box">
  <!-- Ex: "1 - Hercules" -->
  <div *ngFor="let hero of heroes, let i=index">{{i + 1}} - {{hero.name}}</div>
</div>

<a class="to-toc" href="#toc">top</a>

<h4 id="ngFor-trackBy">*ngFor trackBy</h4>
<button (click)="resetHeroes()">Reset heroes</button>
<button (click)="changeIds()">Change ids</button>
<button (click)="clearTrackByCounts()">Clear counts</button>

<p><i>without</i> trackBy</p>
<div class="box">
  <div #noTrackBy *ngFor="let hero of heroes">({{hero.id}}) {{hero.name}}</div>

  <div id="noTrackByCnt" *ngIf="heroesNoTrackByCount" >
    Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
  </div>
</div>

<p>with trackBy</p>
<div class="box">
  <div #withTrackBy *ngFor="let hero of heroes; trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>

  <div id="withTrackByCnt" *ngIf="heroesWithTrackByCount">
    Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
  </div>
</div>

<br><br><br>

<p>with trackBy and <i>semi-colon</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
    ({{hero.id}}) {{hero.name}}
  </div>
</div>

<p>with trackBy and <i>comma</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes, trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
</div>

<p>with trackBy and <i>space</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
</div>

<p>with <i>generic</i> trackById function</p>
<div class="box">
  <div *ngFor="let hero of heroes, trackBy: trackById">({{hero.id}}) {{hero.name}}</div>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgSwitch binding -->
<hr><h2 id="ngSwitch">NgSwitch Binding</h2>

<p>Pick your favorite hero</p>
<div>
  <label *ngFor="let h of heroes">
    <input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h">{{h.name}}
  </label>
</div>

<div [ngSwitch]="currentHero.emotion">
  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></app-happy-hero>
  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></app-sad-hero>
  <app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
  <div *ngSwitchCase="'confused'">Are you as confused as {{currentHero.name}}?</div>
  <app-unknown-hero  *ngSwitchDefault           [hero]="currentHero"></app-unknown-hero>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- template reference variable -->
<hr><h2 id="ref-vars">Template reference variables</h2>

<input #phone placeholder="phone number">

<!-- lots of other elements -->

<!-- phone refers to the input element; pass its \`value\` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>

<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>

<!-- btn refers to the button element; show its disabled state -->
<button #btn disabled [innerHTML]="'disabled by attribute: '+btn.disabled"></button>

<h4>Example Form</h4>
<app-hero-form [hero]="currentHero"></app-hero-form>

<a class="to-toc" href="#toc">top</a>

<!-- inputs and output -->
<hr><h2 id="inputs-and-outputs">Inputs and Outputs</h2>

<img [src]="iconUrl"/>
<button (click)="onSave()">Save</button>

<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
</app-hero-detail>

<div (myClick)="clickMessage2=$event" clickable>myClick2</div>
{{clickMessage2}}

<a class="to-toc" href="#toc">top</a>

<!-- Pipes -->
<hr><h2 id="pipes">Pipes</h2>

<div>Title through uppercase pipe: {{title | uppercase}}</div>

<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
<div>
  Title through a pipe chain:
  {{title | uppercase | lowercase}}
</div>

<!-- pipe with configuration argument => "February 25, 1970" -->
<div>Birthdate: {{currentHero?.birthdate | date:'longDate'}}</div>

<div>{{currentHero | json}}</div>

<div>Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}</div>

<div>
  <!-- pipe price to USD and display the $ symbol -->
  <label>Price: </label>{{product.price | currency:'USD':true}}
</div>

<a class="to-toc" href="#toc">top</a>

<!-- Null values and the safe navigation operator -->
<hr><h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>

<div>
  The title is {{title}}
</div>

<div>
  The current hero's name is {{currentHero?.name}}
</div>

<div>
  The current hero's name is {{currentHero.name}}
</div>


<!--
The null hero's name is {{nullHero.name}}

See console log:
  TypeError: Cannot read property 'name' of null in [null]
-->

<!--No hero, div not displayed, no error -->
<div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>

<div>
The null hero's name is {{nullHero && nullHero.name}}
</div>

<div>
  <!-- No hero, no problem! -->
  The null hero's name is {{nullHero?.name}}
</div>


<a class="to-toc" href="#toc">top</a>

<!-- non-null assertion operator -->
<hr><h2 id="non-null-assertion-operator">Non-null assertion operator <i>!.</i></h2>

<div>
  <!--No hero, no text -->
  <div *ngIf="hero">
    The hero's name is {{hero!.name}}
  </div>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- non-null assertion operator -->
<hr><h2 id="any-type-cast-function">$any type cast function <i>$any( )</i>.</h2>

<div>
  <!-- Accessing an undeclared member -->
  <div>
    The hero's marker is {{$any(hero).marker}}
  </div>
</div>

<div>
  <!-- Accessing an undeclared member -->
  <div>
    Undeclared members is {{$any(this).member}}
  </div>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- TODO: discuss this in the Style binding section -->
<!-- enums in bindings -->
<hr><h2 id="enums">Enums in binding</h2>

<p>
  The name of the Color.Red enum is {{Color[Color.Red]}}.<br>
  The current color is {{Color[color]}} and its number is {{color}}.<br>
  <button [style.color]="Color[color]" (click)="colorToggle()">Enum Toggle</button>
</p>

<a class="to-toc" href="#toc">top</a>


<!-- 
Copyright 2017-2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

<div id="heroForm">
  <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
    <div class="form-group">
      <label for="name">Name
        <input class="form-control" name="name" required [(ngModel)]="hero.name">
      </label>
    </div>
    <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
  </form>
  <div [hidden]="!heroForm.form.valid">
    {{submitMessage}}
  </div>
</div>


<!-- 
Copyright 2017-2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!-- copied from: https://stackblitz.com/angular/ymdjlgmlavo -->

<a id="toc"></a>
<h1>Template Syntax</h1>
<a href="#interpolation">Interpolation</a><br />
<a href="#expression-context">Expression context</a><br />
<a href="#statement-context">Statement context</a><br />
<a href="#mental-model">Mental Model</a><br />
<a href="#buttons">Buttons</a><br />
<a href="#prop-vs-attrib">Properties vs. Attributes</a><br />
<br />
<a href="#property-binding">Property Binding</a><br />
<div style="margin-left:8px">
  <a href="#attribute-binding">Attribute Binding</a><br />
  <a href="#class-binding">Class Binding</a><br />
  <a href="#style-binding">Style Binding</a><br />
</div>
<br />
<a href="#event-binding">Event Binding</a><br />
<a href="#two-way">Two-way Binding</a><br />
<br />
<div>Directives</div>
<div style="margin-left:8px">
  <a href="#ngModel">NgModel (two-way) Binding</a><br />
  <a href="#ngClass">NgClass Binding</a><br />
  <a href="#ngStyle">NgStyle Binding</a><br />
  <a href="#ngIf">NgIf</a><br />
  <a href="#ngFor">NgFor</a><br />
  <div style="margin-left:8px">
    <a href="#ngFor-index">NgFor with index</a><br />
    <a href="#ngFor-trackBy">NgFor with trackBy</a><br />
  </div>
  <a href="#ngSwitch">NgSwitch</a><br />
</div>
<br />
<a href="#ref-vars">Template reference variables</a><br />
<a href="#inputs-and-outputs">Inputs and outputs</a><br />
<a href="#pipes">Pipes</a><br />
<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a
><br />
<a href="#non-null-assertion-operator">Non-null assertion operator <i>!.</i></a
><br />
<a href="#enums">Enums</a><br />

<!-- Interpolation and expressions -->
<hr />
<h2 id="interpolation">Interpolation</h2>

<p>My current hero is {{ currentHero.name }}</p>

<h3>{{ title }} <img src="{{heroImageUrl}}" style="height:30px" /></h3>

<!-- "The sum of 1 + 1 is 2" -->
<p>The sum of 1 + 1 is {{ 1 + 1 }}</p>

<!-- "The sum of 1 + 1 is not 4" -->
<p>The sum of 1 + 1 is not {{ 1 + 1 + getVal() }}</p>

<a class="to-toc" href="#toc">top</a>

<hr />
<h2 id="expression-context">Expression context</h2>

<p>
  Component expression context (&#123;&#123;title&#125;&#125;,
  [hidden]="isUnchanged")
</p>
<div class="context">
  {{ title }} <span [hidden]="isUnchanged">changed</span>
</div>

<p>Template input variable expression context (let hero)</p>
<!-- template hides the following; plenty of examples later -->
<ng-template>
  <div *ngFor="let hero of heroes">{{ hero.name }}</div>
</ng-template>

<p>Template reference variable expression context (#heroInput)</p>
<div (keyup)="(0)" class="context">
  Type something: <input #heroInput /> {{ heroInput.value }}
</div>

<a class="to-toc" href="#toc">top</a>

<hr />
<h2 id="statement-context">Statement context</h2>

<p>Component statement context ( (click)="onSave() )</p>
<div class="context"><button (click)="deleteHero()">Delete hero</button></div>

<p>Template $event statement context</p>
<div class="context"><button (click)="onSave($event)">Save</button></div>

<p>Template input variable statement context (let hero)</p>
<!-- template hides the following; plenty of examples later -->
<div class="context">
  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">
    {{ hero.name }}
  </button>
</div>

<p>Template reference variable statement context (#heroForm)</p>
<div class="context">
  <form #heroForm (ngSubmit)="onSubmit(heroForm)">...</form>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- New Mental Model -->
<hr />
<h2 id="mental-model">New Mental Model</h2>

<!--
  <img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">
-->
<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
<div class="special">Mental Model</div>
<img src="assets/images/hero.png" /> <button disabled>Save</button> <br /><br />

<div>
  <!-- Normal HTML -->
  <div class="special">Mental Model</div>
  <!-- Wow! A new element! -->
  <app-hero-detail></app-hero-detail>
</div>
<br /><br />

<div>
  <!-- Bind button disabled state to \`isUnchanged\` property -->
  <button [disabled]="isUnchanged">Save</button>
</div>
<br /><br />

<div>
  <img [src]="heroImageUrl" />
  <app-hero-detail [hero]="currentHero"></app-hero-detail>
  <div [ngClass]="{ special: isSpecial }"></div>
</div>
<br /><br />

<button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
<div (myClick)="clicked = $event" clickable>click me</div>
{{ clicked }} <br /><br />

<div>Hero Name: <input [(ngModel)]="name" /> {{ name }}</div>
<br /><br />

<button [attr.aria-label]="help">help</button> <br /><br />

<div [class.special]="isSpecial">Special</div>
<br /><br />

<button [style.color]="isSpecial ? 'red' : 'green'">button</button>

<a class="to-toc" href="#toc">top</a>

<!-- property vs. attribute -->
<hr />
<h2 id="prop-vs-attrib">Property vs. Attribute (img examples)</h2>
<!-- examine the following <img> tag in the browser tools -->
<img src="images/ng-logo.png" [src]="heroImageUrl" />

<br /><br />

<img [src]="iconUrl" /> <img bind-src="heroImageUrl" />
<img [attr.src]="villainImageUrl" />

<a class="to-toc" href="#toc">top</a>

<!-- buttons -->
<hr />
<h2 id="buttons">Buttons</h2>

<button>Enabled (but does nothing)</button> <button disabled>Disabled</button>
<button disabled="false">Still disabled</button> <br /><br />
<button disabled>disabled by attribute</button>
<button [disabled]="isUnchanged">disabled by property binding</button>
<br /><br />
<button bind-disabled="isUnchanged" on-click="onSave($event)">
  Disabled Cancel
</button>
<button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>

<a class="to-toc" href="#toc">top</a>

<!-- property binding -->
<hr />
<h2 id="property-binding">Property Binding</h2>

<img [src]="heroImageUrl" />
<button [disabled]="isUnchanged">Cancel is disabled</button>
<div [ngClass]="classes">[ngClass] binding to the classes property</div>
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<img bind-src="heroImageUrl" />

<!--
  ERROR: HeroDetailComponent.hero expects a
  Hero object, not the string "currentHero"
-->
<div *ngIf="false"><app-hero-detail hero="currentHero"></app-hero-detail></div>
<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>

<p><img src="{{heroImageUrl}}" /> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl" /> is the <i>property bound</i> image.</p>

<p>
  <span>"{{ title }}" is the <i>interpolated</i> title.</span>
</p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>

<!--
  Angular generates warnings for these two lines as it sanitizes them
  WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
-->
<p>
  <span>"{{ evilTitle }}" is the <i>interpolated</i> evil title.</span>
</p>
<p>
  "<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil
  title.
</p>

<a class="to-toc" href="#toc">top</a>

<!-- attribute binding -->
<hr />
<h2 id="attribute-binding">Attribute Binding</h2>

<!-- create and set a colspan attribute -->
<table border="1">
  <!-- expression calculates colspan=2 -->
  <tr>
    <td [attr.colspan]="1 + 1">One-Two</td>
  </tr>

  <!--
    ERROR: There is no \`colspan\` property to set!
    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
  -->

  <tr>
    <td>Five</td>
    <td>Six</td>
  </tr>
</table>

<br />
<!-- create and set an aria attribute for assistive technology -->
<button [attr.aria-label]="actionName">{{ actionName }} with Aria</button>
<br /><br />

<!-- The following effects are not discussed in the chapter -->
<div>
  <!-- any use of [attr.disabled] creates the disabled attribute -->
  <button [attr.disabled]="isUnchanged">Disabled</button>

  <button [attr.disabled]="!isUnchanged">Disabled as well</button>

  <!-- we'd have to remove it with property binding -->
  <button disabled [disabled]="false">Enabled (but inert)</button>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- class binding -->
<hr />
<h2 id="class-binding">Class Binding</h2>

<!-- standard class attribute setting -->
<div class="bad curly special">Bad curly special</div>

<!-- reset/override all class names with a binding -->
<div class="bad curly special" [class]="badCurly">Bad curly</div>

<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

<!-- binding to \`class.special\` trumps the class attribute -->
<div class="special" [class.special]="!isSpecial">
  This one is not so special
</div>

<div bind-class.special="isSpecial">This class binding is special too</div>

<a class="to-toc" href="#toc">top</a>

<!-- style binding -->
<hr />
<h2 id="style-binding">Style Binding</h2>

<button [style.color]="isSpecial ? 'red' : 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan' : 'grey'">Save</button>

<button [style.font-size.em]="isSpecial ? 3 : 1">Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50">Small</button>

<a class="to-toc" href="#toc">top</a>

<!-- event binding -->
<hr />
<h2 id="event-binding">Event Binding</h2>

<button (click)="onSave()">Save</button>

<button on-click="onSave()">On Save</button>

<div>
  <!-- \`myClick\` is an event on the custom \`ClickDirective\` -->
  <div (myClick)="clickMessage = $event" clickable>click with myClick</div>
  {{ clickMessage }}
</div>

<!-- binding to a nested component -->
<app-hero-detail
  (deleteRequest)="deleteHero($event)"
  [hero]="currentHero"
></app-hero-detail>
<br />

<app-big-hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero">
</app-big-hero-detail>

<div class="parent-div" (click)="onClickMe($event)" clickable>
  Click me
  <div class="child-div">Click me too!</div>
</div>

<!-- Will save only once -->
<div (click)="onSave()" clickable>
  <button (click)="onSave($event)">Save, no propagation</button>
</div>

<!-- Will save twice -->
<div (click)="onSave()" clickable>
  <button (click)="onSave()">Save w/ propagation</button>
</div>

<a class="to-toc" href="#toc">top</a>

<hr />
<h2 id="two-way">Two-way Binding</h2>
<div id="two-way-1">
  <app-sizer [(size)]="fontSizePx"></app-sizer>
  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
  <label>FontSize (px): <input [(ngModel)]="fontSizePx"/></label>
</div>
<br />
<div id="two-way-2">
  <h3>De-sugared two-way binding</h3>
  <app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx = $event"></app-sizer>
</div>

<a class="to-toc" href="#toc">top</a>

<!--
  Two way data binding unwound;
  passing the changed display value to the event handler via \`$event\`
-->
<hr />
<h2 id="ngModel">NgModel (two-way) Binding</h2>

<h3>Result: {{ currentHero.name }}</h3>

<input
  [value]="currentHero.name"
  (input)="currentHero.name = $event.target.value"
/>
without NgModel <br />
<input [(ngModel)]="currentHero.name" /> [(ngModel)] <br />
<input bindon-ngModel="currentHero.name" /> bindon-ngModel <br />
<input
  [ngModel]="currentHero.name"
  (ngModelChange)="currentHero.name = $event"
/>
(ngModelChange)="...name=$event" <br />
<input
  [ngModel]="currentHero.name"
  (ngModelChange)="setUppercaseName($event)"
/>
(ngModelChange)="setUppercaseName($event)"

<a class="to-toc" href="#toc">top</a>

<!-- NgClass binding -->
<hr />
<h2 id="ngClass">NgClass Binding</h2>

<p>currentClasses is {{ currentClasses | json }}</p>
<div [ngClass]="currentClasses">
  This div is initially saveable, unchanged, and special
</div>

<!-- not used in chapter -->
<br />
<label>saveable <input type="checkbox" [(ngModel)]="canSave"/></label> |
<label
  >modified:
  <input
    type="checkbox"
    [value]="!isUnchanged"
    (change)="isUnchanged = !isUnchanged"
/></label>
| <label>special: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
<button (click)="setCurrentClasses()">Refresh currentClasses</button>
<br /><br />
<div [ngClass]="currentClasses">
  This div should be {{ canSave ? "" : "not" }} saveable,
  {{ isUnchanged ? "unchanged" : "modified" }} and,
  {{ isSpecial ? "" : "not" }} special after clicking "Refresh".
</div>
<br /><br />

<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>

<div class="bad curly special">Bad curly special</div>
<div [ngClass]="{ bad: false, curly: true, special: true }">Curly special</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgStyle binding -->
<hr />
<h2 id="ngStyle">NgStyle Binding</h2>

<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'">
  This div is x-large or smaller.
</div>

<h3>[ngStyle] binding to currentStyles - CSS property names</h3>
<p>currentStyles is {{ currentStyles | json }}</p>
<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>

<!-- not used in chapter -->
<br />
<label>italic: <input type="checkbox" [(ngModel)]="canSave"/></label> |
<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"/></label> |
<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
<button (click)="setCurrentStyles()">Refresh currentStyles</button> <br /><br />
<div [ngStyle]="currentStyles">
  This div should be {{ canSave ? "italic" : "plain" }},
  {{ isUnchanged ? "normal weight" : "bold" }} and,
  {{ isSpecial ? "extra large" : "normal size" }} after clicking "Refresh".
</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgIf binding -->
<hr />
<h2 id="ngIf">NgIf Binding</h2>

<app-hero-detail *ngIf="isActive"></app-hero-detail>

<div *ngIf="currentHero">Hello, {{ currentHero.name }}</div>
<div *ngIf="nullHero">Hello, {{ nullHero.name }}</div>

<!-- NgIf binding with template (no *) -->

<ng-template [ngIf]="currentHero"
  >Add {{ currentHero.name }} with template</ng-template
>

<!-- Does not show because isActive is false! -->
<div>Hero Detail removed from DOM (via template) because isActive is false</div>
<ng-template [ngIf]="isActive">
  <app-hero-detail></app-hero-detail>
</ng-template>

<!-- isSpecial is true -->
<div [class.hidden]="!isSpecial">Show with class</div>
<div [class.hidden]="isSpecial">Hide with class</div>

<!-- HeroDetail is in the DOM but hidden -->
<app-hero-detail [class.hidden]="isSpecial"></app-hero-detail>

<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
<div [style.display]="isSpecial ? 'none' : 'block'">Hide with style</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgFor binding -->
<hr />
<h2 id="ngFor">NgFor Binding</h2>

<div class="box">
  <div *ngFor="let hero of heroes">{{ hero.name }}</div>
</div>
<br />

<div class="box">
  <!-- *ngFor w/ hero-detail Component -->
  <app-hero-detail *ngFor="let hero of heroes" [hero]="hero"></app-hero-detail>
</div>

<a class="to-toc" href="#toc">top</a>

<h4 id="ngFor-index">*ngFor with index</h4>
<p>with <i>semi-colon</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes; let i = index">
    {{ i + 1 }} - {{ hero.name }}
  </div>
</div>

<p>with <i>comma</i> separator</p>
<div class="box">
  <!-- Ex: "1 - Hercules" -->
  <div *ngFor="let hero of heroes; let i = index">
    {{ i + 1 }} - {{ hero.name }}
  </div>
</div>

<a class="to-toc" href="#toc">top</a>

<h4 id="ngFor-trackBy">*ngFor trackBy</h4>
<button (click)="resetHeroes()">Reset heroes</button>
<button (click)="changeIds()">Change ids</button>
<button (click)="clearTrackByCounts()">Clear counts</button>

<p><i>without</i> trackBy</p>
<div class="box">
  <div #noTrackBy *ngFor="let hero of heroes">
    ({{ hero.id }}) {{ hero.name }}
  </div>

  <div id="noTrackByCnt" *ngIf="heroesNoTrackByCount">
    Hero DOM elements change #{{ heroesNoTrackByCount }} without trackBy
  </div>
</div>

<p>with trackBy</p>
<div class="box">
  <div #withTrackBy *ngFor="let hero of heroes; trackBy: trackByHeroes">
    ({{ hero.id }}) {{ hero.name }}
  </div>

  <div id="withTrackByCnt" *ngIf="heroesWithTrackByCount">
    Hero DOM elements change #{{ heroesWithTrackByCount }} with trackBy
  </div>
</div>

<br /><br /><br />

<p>with trackBy and <i>semi-colon</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
    ({{ hero.id }}) {{ hero.name }}
  </div>
</div>

<p>with trackBy and <i>comma</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
    ({{ hero.id }}) {{ hero.name }}
  </div>
</div>

<p>with trackBy and <i>space</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
    ({{ hero.id }}) {{ hero.name }}
  </div>
</div>

<p>with <i>generic</i> trackById function</p>
<div class="box">
  <div *ngFor="let hero of heroes; trackBy: trackById">
    ({{ hero.id }}) {{ hero.name }}
  </div>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgSwitch binding -->
<hr />
<h2 id="ngSwitch">NgSwitch Binding</h2>

<p>Pick your favorite hero</p>
<div>
  <label *ngFor="let h of heroes">
    <input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h" />{{
      h.name
    }}
  </label>
</div>

<div [ngSwitch]="currentHero.emotion">
  <app-happy-hero *ngSwitchCase="'happy'" [hero]="currentHero"></app-happy-hero>
  <app-sad-hero *ngSwitchCase="'sad'" [hero]="currentHero"></app-sad-hero>
  <app-confused-hero
    *ngSwitchCase="'confused'"
    [hero]="currentHero"
  ></app-confused-hero>
  <div *ngSwitchCase="'confused'">
    Are you as confused as {{ currentHero.name }}?
  </div>
  <app-unknown-hero *ngSwitchDefault [hero]="currentHero"></app-unknown-hero>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- template reference variable -->
<hr />
<h2 id="ref-vars">Template reference variables</h2>

<input #phone placeholder="phone number" />

<!-- lots of other elements -->

<!-- phone refers to the input element; pass its \`value\` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>

<input ref-fax placeholder="fax number" />
<button (click)="callFax(fax.value)">Fax</button>

<!-- btn refers to the button element; show its disabled state -->
<button
  #btn
  disabled
  [innerHTML]="'disabled by attribute: ' + btn.disabled"
></button>

<h4>Example Form</h4>
<app-hero-form [hero]="currentHero"></app-hero-form>

<a class="to-toc" href="#toc">top</a>

<!-- inputs and output -->
<hr />
<h2 id="inputs-and-outputs">Inputs and Outputs</h2>

<img [src]="iconUrl" /> <button (click)="onSave()">Save</button>

<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
</app-hero-detail>

<div (myClick)="clickMessage2 = $event" clickable>myClick2</div>
{{ clickMessage2 }}

<a class="to-toc" href="#toc">top</a>

<!-- Pipes -->
<hr />
<h2 id="pipes">Pipes</h2>

<div>Title through uppercase pipe: {{ title | uppercase }}</div>

<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
<div>Title through a pipe chain: {{ title | uppercase | lowercase }}</div>

<!-- pipe with configuration argument => "February 25, 1970" -->
<div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>

<div>{{ currentHero | json }}</div>

<div>
  Birthdate: {{ currentHero?.birthdate | date: "longDate" | uppercase }}
</div>

<div>
  <!-- pipe price to USD and display the $ symbol -->
  <label>Price: </label>{{ product.price | currency: "USD":true }}
</div>

<a class="to-toc" href="#toc">top</a>

<!-- Null values and the safe navigation operator -->
<hr />
<h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>

<div>The title is {{ title }}</div>

<div>The current hero's name is {{ currentHero?.name }}</div>

<div>The current hero's name is {{ currentHero.name }}</div>

<!--
  The null hero's name is {{nullHero.name}}

  See console log:
    TypeError: Cannot read property 'name' of null in [null]
-->

<!-- No hero, div not displayed, no error -->
<div *ngIf="nullHero">The null hero's name is {{ nullHero.name }}</div>

<div>The null hero's name is {{ nullHero && nullHero.name }}</div>

<div>
  <!-- No hero, no problem! -->
  The null hero's name is {{ nullHero?.name }}
</div>

<a class="to-toc" href="#toc">top</a>

<!-- non-null assertion operator -->
<hr />
<h2 id="non-null-assertion-operator">Non-null assertion operator <i>!.</i></h2>

<div>
  <!-- No hero, no text -->
  <div *ngIf="hero">The hero's name is {{ hero!.name }}</div>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- non-null assertion operator -->
<hr />
<h2 id="any-type-cast-function">$any type cast function <i>$any( )</i>.</h2>

<div>
  <!-- Accessing an undeclared member -->
  <div>The hero's marker is {{ $any(hero).marker }}</div>
</div>

<div>
  <!-- Accessing an undeclared member -->
  <div>Undeclared members is {{$any(this).member}}</div>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- TODO: discuss this in the Style binding section -->
<!-- enums in bindings -->
<hr />
<h2 id="enums">Enums in binding</h2>

<p>
  The name of the Color.Red enum is {{ Color[Color.Red] }}.<br />
  The current color is {{ Color[color] }} and its number is {{ color }}.<br />
  <button [style.color]="Color[color]" (click)="colorToggle()">
    Enum Toggle
  </button>
</p>

<a class="to-toc" href="#toc">top</a>

<!--
  Copyright 2017-2018 Google Inc. All Rights Reserved.
  Use of this source code is governed by an MIT-style license that
  can be found in the LICENSE file at http://angular.io/license
-->

<div id="heroForm">
  <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
    <div class="form-group">
      <label for="name"
        >Name
        <input
          class="form-control"
          name="name"
          required
          [(ngModel)]="hero.name"
        />
      </label>
    </div>
    <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
  </form>
  <div [hidden]="!heroForm.form.valid">{{ submitMessage }}</div>
</div>

<!--
  Copyright 2017-2018 Google Inc. All Rights Reserved.
  Use of this source code is governed by an MIT-style license that
  can be found in the LICENSE file at http://angular.io/license
-->

`;

exports[`real-world.component.html - angular-verify 3`] = `
<!-- copied from: https://stackblitz.com/angular/ymdjlgmlavo -->

<a id="toc"></a>
<h1>Template Syntax</h1>
<a href="#interpolation">Interpolation</a><br>
<a href="#expression-context">Expression context</a><br>
<a href="#statement-context">Statement context</a><br>
<a href="#mental-model">Mental Model</a><br>
<a href="#buttons">Buttons</a><br>
<a href="#prop-vs-attrib">Properties vs. Attributes</a><br>
<br>
<a href="#property-binding">Property Binding</a><br>
<div style="margin-left:8px">
  <a href="#attribute-binding">Attribute Binding</a><br>
  <a href="#class-binding">Class Binding</a><br>
  <a href="#style-binding">Style Binding</a><br>
</div>
<br>
<a href="#event-binding">Event Binding</a><br>
<a href="#two-way">Two-way Binding</a><br>
<br>
<div>Directives</div>
<div style="margin-left:8px">
  <a href="#ngModel">NgModel (two-way) Binding</a><br>
  <a href="#ngClass">NgClass Binding</a><br>
  <a href="#ngStyle">NgStyle Binding</a><br>
  <a href="#ngIf">NgIf</a><br>
  <a href="#ngFor">NgFor</a><br>
  <div style="margin-left:8px">
    <a href="#ngFor-index">NgFor with index</a><br>
    <a href="#ngFor-trackBy">NgFor with trackBy</a><br>
  </div>
  <a href="#ngSwitch">NgSwitch</a><br>
</div>
<br>
<a href="#ref-vars">Template reference variables</a><br>
<a href="#inputs-and-outputs">Inputs and outputs</a><br>
<a href="#pipes">Pipes</a><br>
<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
<a href="#non-null-assertion-operator">Non-null assertion operator <i>!.</i></a><br>
<a href="#enums">Enums</a><br>

<!-- Interpolation and expressions -->
<hr><h2 id="interpolation">Interpolation</h2>

<p>My current hero is {{currentHero.name}}</p>

<h3>
  {{title}}
  <img src="{{heroImageUrl}}" style="height:30px">
</h3>

<!-- "The sum of 1 + 1 is 2" -->
<p>The sum of 1 + 1 is {{1 + 1}}</p>

<!-- "The sum of 1 + 1 is not 4" -->
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>

<a class="to-toc" href="#toc">top</a>

<hr><h2 id="expression-context">Expression context</h2>

<p>Component expression context (&#123;&#123;title&#125;&#125;, [hidden]="isUnchanged")</p>
<div class="context">
  {{title}}
  <span [hidden]="isUnchanged">changed</span>
</div>


<p>Template input variable expression context (let hero)</p>
<!-- template hides the following; plenty of examples later -->
<ng-template>
  <div *ngFor="let hero of heroes">{{hero.name}}</div>
</ng-template>

<p>Template reference variable expression context (#heroInput)</p>
<div (keyup)="0" class="context">
  Type something:
  <input #heroInput> {{heroInput.value}}
</div>

<a class="to-toc" href="#toc">top</a>

<hr><h2 id="statement-context">Statement context</h2>

<p>Component statement context ( (click)="onSave() )
<div class="context">
  <button (click)="deleteHero()">Delete hero</button>
</div>

<p>Template $event statement context</p>
<div class="context">
  <button (click)="onSave($event)">Save</button>
</div>

<p>Template input variable statement context (let hero)</p>
<!-- template hides the following; plenty of examples later -->
<div class="context">
  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
</div>

<p>Template reference variable statement context (#heroForm)</p>
<div class="context">
  <form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- New Mental Model -->
<hr><h2 id="mental-model">New Mental Model</h2>

<!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
<div class="special">Mental Model</div>
<img src="assets/images/hero.png">
<button disabled>Save</button>
<br><br>

<div>
  <!-- Normal HTML -->
  <div class="special">Mental Model</div>
  <!-- Wow! A new element! -->
  <app-hero-detail></app-hero-detail>
</div>
<br><br>

<div>
  <!-- Bind button disabled state to \`isUnchanged\` property -->
  <button [disabled]="isUnchanged">Save</button>
</div>
<br><br>

<div>
  <img [src]="heroImageUrl">
  <app-hero-detail [hero]="currentHero"></app-hero-detail>
  <div [ngClass]="{'special': isSpecial}"></div>
</div>
<br><br>

<button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
<div (myClick)="clicked=$event" clickable>click me</div>
{{clicked}}
<br><br>

<div>
  Hero Name:
  <input [(ngModel)]="name">
  {{name}}
</div>
<br><br>

<button [attr.aria-label]="help">help</button>
<br><br>

<div [class.special]="isSpecial">Special</div>
<br><br>

<button [style.color]="isSpecial ? 'red' : 'green'">
button</button>

<a class="to-toc" href="#toc">top</a>

<!-- property vs. attribute -->
<hr><h2 id="prop-vs-attrib">Property vs. Attribute (img examples)</h2>
<!-- examine the following <img> tag in the browser tools -->
<img src="images/ng-logo.png"
    [src]="heroImageUrl">

<br><br>

<img [src]="iconUrl"/>
<img bind-src="heroImageUrl"/>
<img [attr.src]="villainImageUrl"/>

<a class="to-toc" href="#toc">top</a>

<!-- buttons -->
<hr><h2 id="buttons">Buttons</h2>

<button>Enabled (but does nothing)</button>
<button disabled>Disabled</button>
<button disabled=false>Still disabled</button>
<br><br>
<button disabled>disabled by attribute</button>
<button [disabled]="isUnchanged">disabled by property binding</button>
<br><br>
<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
<button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>

<a class="to-toc" href="#toc">top</a>

<!-- property binding -->
<hr><h2 id="property-binding">Property Binding</h2>

<img [src]="heroImageUrl">
<button [disabled]="isUnchanged">Cancel is disabled</button>
<div [ngClass]="classes">[ngClass] binding to the classes property</div>
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<img bind-src="heroImageUrl">

<!-- ERROR: HeroDetailComponent.hero expects a
     Hero object, not the string "currentHero" -->
<div *ngIf="false">
  <app-hero-detail hero="currentHero"></app-hero-detail>
</div>
<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>

<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>

<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>

<!--
  Angular generates warnings for these two lines as it sanitizes them
  WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
 -->
<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
<p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>

<a class="to-toc" href="#toc">top</a>

<!-- attribute binding -->
<hr><h2 id="attribute-binding">Attribute Binding</h2>

<!--  create and set a colspan attribute -->
<table border=1>
  <!--  expression calculates colspan=2 -->
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>

  <!-- ERROR: There is no \`colspan\` property to set!
    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
  -->

  <tr><td>Five</td><td>Six</td></tr>
</table>

<br>
<!-- create and set an aria attribute for assistive technology -->
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
<br><br>

<!-- The following effects are not discussed in the chapter -->
<div>
  <!-- any use of [attr.disabled] creates the disabled attribute -->
  <button [attr.disabled]="isUnchanged">Disabled</button>

  <button [attr.disabled]="!isUnchanged">Disabled as well</button>

  <!-- we'd have to remove it with property binding -->
  <button disabled [disabled]="false">Enabled (but inert)</button>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- class binding -->
<hr><h2 id="class-binding">Class Binding</h2>

<!-- standard class attribute setting  -->
<div class="bad curly special">Bad curly special</div>

<!-- reset/override all class names with a binding  -->
<div class="bad curly special"
     [class]="badCurly">Bad curly</div>

<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

<!-- binding to \`class.special\` trumps the class attribute -->
<div class="special"
     [class.special]="!isSpecial">This one is not so special</div>

<div bind-class.special="isSpecial">This class binding is special too</div>

<a class="to-toc" href="#toc">top</a>

<!--style binding -->
<hr><h2 id="style-binding">Style Binding</h2>

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

<a class="to-toc" href="#toc">top</a>

<!-- event binding -->
<hr><h2 id="event-binding">Event Binding</h2>

<button (click)="onSave()">Save</button>

<button on-click="onSave()">On Save</button>

<div>
<!-- \`myClick\` is an event on the custom \`ClickDirective\` -->
<div (myClick)="clickMessage=$event" clickable>click with myClick</div>
{{clickMessage}}
</div>


<!-- binding to a nested component -->
<app-hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></app-hero-detail>
<br>

<app-big-hero-detail
    (deleteRequest)="deleteHero($event)"
    [hero]="currentHero">
</app-big-hero-detail>

<div class="parent-div" (click)="onClickMe($event)" clickable>Click me
  <div class="child-div">Click me too!</div>
</div>

<!-- Will save only once -->
<div (click)="onSave()" clickable>
  <button (click)="onSave($event)">Save, no propagation</button>
</div>

<!-- Will save twice -->
<div (click)="onSave()" clickable>
  <button (click)="onSave()">Save w/ propagation</button>
</div>

<a class="to-toc" href="#toc">top</a>

<hr><h2 id="two-way">Two-way Binding</h2>
<div id="two-way-1">
  <app-sizer [(size)]="fontSizePx"></app-sizer>
  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
  <label>FontSize (px): <input [(ngModel)]="fontSizePx"></label>
</div>
<br>
<div id="two-way-2">
  <h3>De-sugared two-way binding</h3>
  <app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- Two way data binding unwound;
    passing the changed display value to the event handler via \`$event\` -->
<hr><h2 id="ngModel">NgModel (two-way) Binding</h2>

<h3>Result: {{currentHero.name}}</h3>

<input [value]="currentHero.name"
       (input)="currentHero.name=$event.target.value" >
without NgModel
<br>
<input [(ngModel)]="currentHero.name">
[(ngModel)]
<br>
<input bindon-ngModel="currentHero.name">
bindon-ngModel
<br>
<input
  [ngModel]="currentHero.name"
  (ngModelChange)="currentHero.name=$event">
(ngModelChange)="...name=$event"
<br>
<input
  [ngModel]="currentHero.name"
  (ngModelChange)="setUppercaseName($event)">
(ngModelChange)="setUppercaseName($event)"

<a class="to-toc" href="#toc">top</a>

<!-- NgClass binding -->
<hr><h2 id="ngClass">NgClass Binding</h2>

<p>currentClasses is {{currentClasses | json}}</p>
<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>

<!-- not used in chapter -->
<br>
<label>saveable   <input type="checkbox" [(ngModel)]="canSave"></label> |
<label>modified:  <input type="checkbox" [value]="!isUnchanged" (change)="isUnchanged=!isUnchanged"></label> |
<label>special:   <input type="checkbox" [(ngModel)]="isSpecial"></label>
<button (click)="setCurrentClasses()">Refresh currentClasses</button>
<br><br>
<div [ngClass]="currentClasses">
  This div should be {{ canSave ? "": "not"}} saveable,
                  {{ isUnchanged ? "unchanged" : "modified" }} and,
                  {{ isSpecial ? "": "not"}} special after clicking "Refresh".</div>
<br><br>

<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>

<div class="bad curly special">Bad curly special</div>
<div [ngClass]="{'bad':false, 'curly':true, 'special':true}">Curly special</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgStyle binding -->
<hr><h2 id="ngStyle">NgStyle Binding</h2>

<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
  This div is x-large or smaller.
</div>

<h3>[ngStyle] binding to currentStyles - CSS property names</h3>
<p>currentStyles is {{currentStyles | json}}</p>
<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>

<!-- not used in chapter -->
<br>
<label>italic: <input type="checkbox" [(ngModel)]="canSave"></label> |
<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"></label> |
<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"></label>
<button (click)="setCurrentStyles()">Refresh currentStyles</button>
<br><br>
<div [ngStyle]="currentStyles">
  This div should be {{ canSave ? "italic": "plain"}},
                  {{ isUnchanged ? "normal weight" : "bold" }} and,
                  {{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgIf binding -->
<hr><h2 id="ngIf">NgIf Binding</h2>

<app-hero-detail *ngIf="isActive"></app-hero-detail>

<div *ngIf="currentHero">Hello, {{currentHero.name}}</div>
<div *ngIf="nullHero">Hello, {{nullHero.name}}</div>

<!-- NgIf binding with template (no *) -->

<ng-template [ngIf]="currentHero">Add {{currentHero.name}} with template</ng-template>

<!-- Does not show because isActive is false! -->
<div>Hero Detail removed from DOM (via template) because isActive is false</div>
<ng-template [ngIf]="isActive">
  <app-hero-detail></app-hero-detail>
</ng-template>

<!-- isSpecial is true -->
<div [class.hidden]="!isSpecial">Show with class</div>
<div [class.hidden]="isSpecial">Hide with class</div>

<!-- HeroDetail is in the DOM but hidden -->
<app-hero-detail [class.hidden]="isSpecial"></app-hero-detail>

<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
<div [style.display]="isSpecial ? 'none'  : 'block'">Hide with style</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgFor binding -->
<hr><h2 id="ngFor">NgFor Binding</h2>

<div class="box">
  <div *ngFor="let hero of heroes">{{hero.name}}</div>
</div>
<br>

<div class="box">
  <!-- *ngFor w/ hero-detail Component -->
  <app-hero-detail *ngFor="let hero of heroes" [hero]="hero"></app-hero-detail>
</div>

<a class="to-toc" href="#toc">top</a>

<h4 id="ngFor-index">*ngFor with index</h4>
<p>with <i>semi-colon</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
</div>

<p>with <i>comma</i> separator</p>
<div class="box">
  <!-- Ex: "1 - Hercules" -->
  <div *ngFor="let hero of heroes, let i=index">{{i + 1}} - {{hero.name}}</div>
</div>

<a class="to-toc" href="#toc">top</a>

<h4 id="ngFor-trackBy">*ngFor trackBy</h4>
<button (click)="resetHeroes()">Reset heroes</button>
<button (click)="changeIds()">Change ids</button>
<button (click)="clearTrackByCounts()">Clear counts</button>

<p><i>without</i> trackBy</p>
<div class="box">
  <div #noTrackBy *ngFor="let hero of heroes">({{hero.id}}) {{hero.name}}</div>

  <div id="noTrackByCnt" *ngIf="heroesNoTrackByCount" >
    Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
  </div>
</div>

<p>with trackBy</p>
<div class="box">
  <div #withTrackBy *ngFor="let hero of heroes; trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>

  <div id="withTrackByCnt" *ngIf="heroesWithTrackByCount">
    Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
  </div>
</div>

<br><br><br>

<p>with trackBy and <i>semi-colon</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
    ({{hero.id}}) {{hero.name}}
  </div>
</div>

<p>with trackBy and <i>comma</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes, trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
</div>

<p>with trackBy and <i>space</i> separator</p>
<div class="box">
  <div *ngFor="let hero of heroes trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
</div>

<p>with <i>generic</i> trackById function</p>
<div class="box">
  <div *ngFor="let hero of heroes, trackBy: trackById">({{hero.id}}) {{hero.name}}</div>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- NgSwitch binding -->
<hr><h2 id="ngSwitch">NgSwitch Binding</h2>

<p>Pick your favorite hero</p>
<div>
  <label *ngFor="let h of heroes">
    <input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h">{{h.name}}
  </label>
</div>

<div [ngSwitch]="currentHero.emotion">
  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></app-happy-hero>
  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></app-sad-hero>
  <app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
  <div *ngSwitchCase="'confused'">Are you as confused as {{currentHero.name}}?</div>
  <app-unknown-hero  *ngSwitchDefault           [hero]="currentHero"></app-unknown-hero>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- template reference variable -->
<hr><h2 id="ref-vars">Template reference variables</h2>

<input #phone placeholder="phone number">

<!-- lots of other elements -->

<!-- phone refers to the input element; pass its \`value\` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>

<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>

<!-- btn refers to the button element; show its disabled state -->
<button #btn disabled [innerHTML]="'disabled by attribute: '+btn.disabled"></button>

<h4>Example Form</h4>
<app-hero-form [hero]="currentHero"></app-hero-form>

<a class="to-toc" href="#toc">top</a>

<!-- inputs and output -->
<hr><h2 id="inputs-and-outputs">Inputs and Outputs</h2>

<img [src]="iconUrl"/>
<button (click)="onSave()">Save</button>

<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
</app-hero-detail>

<div (myClick)="clickMessage2=$event" clickable>myClick2</div>
{{clickMessage2}}

<a class="to-toc" href="#toc">top</a>

<!-- Pipes -->
<hr><h2 id="pipes">Pipes</h2>

<div>Title through uppercase pipe: {{title | uppercase}}</div>

<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
<div>
  Title through a pipe chain:
  {{title | uppercase | lowercase}}
</div>

<!-- pipe with configuration argument => "February 25, 1970" -->
<div>Birthdate: {{currentHero?.birthdate | date:'longDate'}}</div>

<div>{{currentHero | json}}</div>

<div>Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}</div>

<div>
  <!-- pipe price to USD and display the $ symbol -->
  <label>Price: </label>{{product.price | currency:'USD':true}}
</div>

<a class="to-toc" href="#toc">top</a>

<!-- Null values and the safe navigation operator -->
<hr><h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>

<div>
  The title is {{title}}
</div>

<div>
  The current hero's name is {{currentHero?.name}}
</div>

<div>
  The current hero's name is {{currentHero.name}}
</div>


<!--
The null hero's name is {{nullHero.name}}

See console log:
  TypeError: Cannot read property 'name' of null in [null]
-->

<!--No hero, div not displayed, no error -->
<div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>

<div>
The null hero's name is {{nullHero && nullHero.name}}
</div>

<div>
  <!-- No hero, no problem! -->
  The null hero's name is {{nullHero?.name}}
</div>


<a class="to-toc" href="#toc">top</a>

<!-- non-null assertion operator -->
<hr><h2 id="non-null-assertion-operator">Non-null assertion operator <i>!.</i></h2>

<div>
  <!--No hero, no text -->
  <div *ngIf="hero">
    The hero's name is {{hero!.name}}
  </div>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- non-null assertion operator -->
<hr><h2 id="any-type-cast-function">$any type cast function <i>$any( )</i>.</h2>

<div>
  <!-- Accessing an undeclared member -->
  <div>
    The hero's marker is {{$any(hero).marker}}
  </div>
</div>

<div>
  <!-- Accessing an undeclared member -->
  <div>
    Undeclared members is {{$any(this).member}}
  </div>
</div>

<a class="to-toc" href="#toc">top</a>

<!-- TODO: discuss this in the Style binding section -->
<!-- enums in bindings -->
<hr><h2 id="enums">Enums in binding</h2>

<p>
  The name of the Color.Red enum is {{Color[Color.Red]}}.<br>
  The current color is {{Color[color]}} and its number is {{color}}.<br>
  <button [style.color]="Color[color]" (click)="colorToggle()">Enum Toggle</button>
</p>

<a class="to-toc" href="#toc">top</a>


<!-- 
Copyright 2017-2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

<div id="heroForm">
  <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
    <div class="form-group">
      <label for="name">Name
        <input class="form-control" name="name" required [(ngModel)]="hero.name">
      </label>
    </div>
    <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
  </form>
  <div [hidden]="!heroForm.form.valid">
    {{submitMessage}}
  </div>
</div>


<!-- 
Copyright 2017-2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
~
<!--
  copied from: https://stackblitz.com/angular/ymdjlgmlavo
-->

<a
  id="toc"
></a>
<h1>
  Template
  Syntax
</h1>
<a
  href="#interpolation"
  >Interpolation</a
><br />
<a
  href="#expression-context"
  >Expression
  context</a
><br />
<a
  href="#statement-context"
  >Statement
  context</a
><br />
<a
  href="#mental-model"
  >Mental
  Model</a
><br />
<a
  href="#buttons"
  >Buttons</a
><br />
<a
  href="#prop-vs-attrib"
  >Properties
  vs.
  Attributes</a
><br />
<br />
<a
  href="#property-binding"
  >Property
  Binding</a
><br />
<div
  style="margin-left:8px"
>
  <a
    href="#attribute-binding"
    >Attribute
    Binding</a
  ><br />
  <a
    href="#class-binding"
    >Class
    Binding</a
  ><br />
  <a
    href="#style-binding"
    >Style
    Binding</a
  ><br />
</div>
<br />
<a
  href="#event-binding"
  >Event
  Binding</a
><br />
<a
  href="#two-way"
  >Two-way
  Binding</a
><br />
<br />
<div>
  Directives
</div>
<div
  style="margin-left:8px"
>
  <a
    href="#ngModel"
    >NgModel
    (two-way)
    Binding</a
  ><br />
  <a
    href="#ngClass"
    >NgClass
    Binding</a
  ><br />
  <a
    href="#ngStyle"
    >NgStyle
    Binding</a
  ><br />
  <a
    href="#ngIf"
    >NgIf</a
  ><br />
  <a
    href="#ngFor"
    >NgFor</a
  ><br />
  <div
    style="margin-left:8px"
  >
    <a
      href="#ngFor-index"
      >NgFor
      with
      index</a
    ><br />
    <a
      href="#ngFor-trackBy"
      >NgFor
      with
      trackBy</a
    ><br />
  </div>
  <a
    href="#ngSwitch"
    >NgSwitch</a
  ><br />
</div>
<br />
<a
  href="#ref-vars"
  >Template
  reference
  variables</a
><br />
<a
  href="#inputs-and-outputs"
  >Inputs
  and
  outputs</a
><br />
<a
  href="#pipes"
  >Pipes</a
><br />
<a
  href="#safe-navigation-operator"
  >Safe
  navigation
  operator
  <i
    >?.</i
  ></a
><br />
<a
  href="#non-null-assertion-operator"
  >Non-null
  assertion
  operator
  <i
    >!.</i
  ></a
><br />
<a
  href="#enums"
  >Enums</a
><br />

<!--
  Interpolation and expressions
-->
<hr />
<h2
  id="interpolation"
>
  Interpolation
</h2>

<p>
  My
  current
  hero
  is
  {{
    currentHero.name
  }}
</p>

<h3>
  {{
    title
  }}
  <img
    src="{{heroImageUrl}}"
    style="height:30px"
  />
</h3>

<!--
  "The sum of 1 + 1 is 2"
-->
<p>
  The
  sum
  of
  1
  +
  1
  is
  {{
    1 +
      1
  }}
</p>

<!--
  "The sum of 1 + 1 is not 4"
-->
<p>
  The
  sum
  of
  1
  +
  1
  is
  not
  {{
    1 +
      1 +
      getVal()
  }}
</p>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<hr />
<h2
  id="expression-context"
>
  Expression
  context
</h2>

<p>
  Component
  expression
  context
  (&#123;&#123;title&#125;&#125;,
  [hidden]="isUnchanged")
</p>
<div
  class="context"
>
  {{
    title
  }}
  <span
    [hidden]="
      isUnchanged
    "
    >changed</span
  >
</div>

<p>
  Template
  input
  variable
  expression
  context
  (let
  hero)
</p>
<!--
  template hides the following; plenty of examples later
-->
<ng-template>
  <div
    *ngFor="
      let hero of heroes
    "
  >
    {{
      hero.name
    }}
  </div>
</ng-template>

<p>
  Template
  reference
  variable
  expression
  context
  (#heroInput)
</p>
<div
  (keyup)="
    (0)
  "
  class="context"
>
  Type
  something:
  <input
    #heroInput
  />
  {{
    heroInput.value
  }}
</div>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<hr />
<h2
  id="statement-context"
>
  Statement
  context
</h2>

<p>
  Component
  statement
  context
  (
  (click)="onSave()
  )
</p>
<div
  class="context"
>
  <button
    (click)="
      deleteHero()
    "
  >
    Delete
    hero
  </button>
</div>

<p>
  Template
  $event
  statement
  context
</p>
<div
  class="context"
>
  <button
    (click)="
      onSave(
        $event
      )
    "
  >
    Save
  </button>
</div>

<p>
  Template
  input
  variable
  statement
  context
  (let
  hero)
</p>
<!--
  template hides the following; plenty of examples later
-->
<div
  class="context"
>
  <button
    *ngFor="
      let hero of heroes
    "
    (click)="
      deleteHero(
        hero
      )
    "
  >
    {{
      hero.name
    }}
  </button>
</div>

<p>
  Template
  reference
  variable
  statement
  context
  (#heroForm)
</p>
<div
  class="context"
>
  <form
    #heroForm
    (ngSubmit)="
      onSubmit(
        heroForm
      )
    "
  >
    ...
  </form>
</div>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  New Mental Model
-->
<hr />
<h2
  id="mental-model"
>
  New
  Mental
  Model
</h2>

<!--
  <img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">
-->
<!--
  Public Domain terms of use: http://www.wpclipart.com/terms.html
-->
<div
  class="special"
>
  Mental
  Model
</div>
<img
  src="assets/images/hero.png"
/>
<button
  disabled
>
  Save
</button>
<br /><br />

<div>
  <!--
    Normal HTML
  -->
  <div
    class="special"
  >
    Mental
    Model
  </div>
  <!--
    Wow! A new element!
  -->
  <app-hero-detail></app-hero-detail>
</div>
<br /><br />

<div>
  <!--
    Bind button disabled state to \`isUnchanged\` property
  -->
  <button
    [disabled]="
      isUnchanged
    "
  >
    Save
  </button>
</div>
<br /><br />

<div>
  <img
    [src]="
      heroImageUrl
    "
  />
  <app-hero-detail
    [hero]="
      currentHero
    "
  ></app-hero-detail>
  <div
    [ngClass]="{
      special: isSpecial
    }"
  ></div>
</div>
<br /><br />

<button
  (click)="
    onSave()
  "
>
  Save
</button>
<app-hero-detail
  (deleteRequest)="
    deleteHero()
  "
></app-hero-detail>
<div
  (myClick)="
    clicked = $event
  "
  clickable
>
  click
  me
</div>
{{
  clicked
}}
<br /><br />

<div>
  Hero
  Name:
  <input
    [(ngModel)]="
      name
    "
  />
  {{
    name
  }}
</div>
<br /><br />

<button
  [attr.aria-label]="
    help
  "
>
  help
</button>
<br /><br />

<div
  [class.special]="
    isSpecial
  "
>
  Special
</div>
<br /><br />

<button
  [style.color]="
    isSpecial
      ? 'red'
      : 'green'
  "
>
  button
</button>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  property vs. attribute
-->
<hr />
<h2
  id="prop-vs-attrib"
>
  Property
  vs.
  Attribute
  (img
  examples)
</h2>
<!--
  examine the following <img> tag in the browser tools
-->
<img
  src="images/ng-logo.png"
  [src]="
    heroImageUrl
  "
/>

<br /><br />

<img
  [src]="
    iconUrl
  "
/>
<img
  bind-src="
    heroImageUrl
  "
/>
<img
  [attr.src]="
    villainImageUrl
  "
/>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  buttons
-->
<hr />
<h2
  id="buttons"
>
  Buttons
</h2>

<button>
  Enabled
  (but
  does
  nothing)
</button>
<button
  disabled
>
  Disabled
</button>
<button
  disabled="false"
>
  Still
  disabled
</button>
<br /><br />
<button
  disabled
>
  disabled
  by
  attribute
</button>
<button
  [disabled]="
    isUnchanged
  "
>
  disabled
  by
  property
  binding
</button>
<br /><br />
<button
  bind-disabled="
    isUnchanged
  "
  on-click="
    onSave(
      $event
    )
  "
>
  Disabled
  Cancel
</button>
<button
  [disabled]="
    !canSave
  "
  (click)="
    onSave(
      $event
    )
  "
>
  Enabled
  Save
</button>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  property binding
-->
<hr />
<h2
  id="property-binding"
>
  Property
  Binding
</h2>

<img
  [src]="
    heroImageUrl
  "
/>
<button
  [disabled]="
    isUnchanged
  "
>
  Cancel
  is
  disabled
</button>
<div
  [ngClass]="
    classes
  "
>
  [ngClass]
  binding
  to
  the
  classes
  property
</div>
<app-hero-detail
  [hero]="
    currentHero
  "
></app-hero-detail>
<img
  bind-src="
    heroImageUrl
  "
/>

<!--
  ERROR: HeroDetailComponent.hero expects a
  Hero object, not the string "currentHero"
-->
<div
  *ngIf="
    false
  "
>
  <app-hero-detail
    hero="currentHero"
  ></app-hero-detail>
</div>
<app-hero-detail
  prefix="You are my"
  [hero]="
    currentHero
  "
></app-hero-detail>

<p>
  <img
    src="{{heroImageUrl}}"
  />
  is
  the
  <i
    >interpolated</i
  >
  image.
</p>
<p>
  <img
    [src]="
      heroImageUrl
    "
  />
  is
  the
  <i
    >property
    bound</i
  >
  image.
</p>

<p>
  <span
    >"{{
      title
    }}"
    is
    the
    <i
      >interpolated</i
    >
    title.</span
  >
</p>
<p>
  "<span
    [innerHTML]="
      title
    "
  ></span
  >"
  is
  the
  <i
    >property
    bound</i
  >
  title.
</p>

<!--
  Angular generates warnings for these two lines as it sanitizes them
  WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
-->
<p>
  <span
    >"{{
      evilTitle
    }}"
    is
    the
    <i
      >interpolated</i
    >
    evil
    title.</span
  >
</p>
<p>
  "<span
    [innerHTML]="
      evilTitle
    "
  ></span
  >"
  is
  the
  <i
    >property
    bound</i
  >
  evil
  title.
</p>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  attribute binding
-->
<hr />
<h2
  id="attribute-binding"
>
  Attribute
  Binding
</h2>

<!--
  create and set a colspan attribute
-->
<table
  border="1"
>
  <!--
    expression calculates colspan=2
  -->
  <tr>
    <td
      [attr.colspan]="
        1 +
        1
      "
    >
      One-Two
    </td>
  </tr>

  <!--
    ERROR: There is no \`colspan\` property to set!
    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
  -->

  <tr>
    <td>
      Five
    </td>
    <td>
      Six
    </td>
  </tr>
</table>

<br />
<!--
  create and set an aria attribute for assistive technology
-->
<button
  [attr.aria-label]="
    actionName
  "
>
  {{
    actionName
  }}
  with
  Aria
</button>
<br /><br />

<!--
  The following effects are not discussed in the chapter
-->
<div>
  <!--
    any use of [attr.disabled] creates the disabled attribute
  -->
  <button
    [attr.disabled]="
      isUnchanged
    "
  >
    Disabled
  </button>

  <button
    [attr.disabled]="
      !isUnchanged
    "
  >
    Disabled
    as
    well
  </button>

  <!--
    we'd have to remove it with property binding
  -->
  <button
    disabled
    [disabled]="
      false
    "
  >
    Enabled
    (but
    inert)
  </button>
</div>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  class binding
-->
<hr />
<h2
  id="class-binding"
>
  Class
  Binding
</h2>

<!--
  standard class attribute setting
-->
<div
  class="bad curly special"
>
  Bad
  curly
  special
</div>

<!--
  reset/override all class names with a binding
-->
<div
  class="bad curly special"
  [class]="
    badCurly
  "
>
  Bad
  curly
</div>

<!--
  toggle the "special" class on/off with a property
-->
<div
  [class.special]="
    isSpecial
  "
>
  The
  class
  binding
  is
  special
</div>

<!--
  binding to \`class.special\` trumps the class attribute
-->
<div
  class="special"
  [class.special]="
    !isSpecial
  "
>
  This
  one
  is
  not
  so
  special
</div>

<div
  bind-class.special="
    isSpecial
  "
>
  This
  class
  binding
  is
  special
  too
</div>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  style binding
-->
<hr />
<h2
  id="style-binding"
>
  Style
  Binding
</h2>

<button
  [style.color]="
    isSpecial
      ? 'red'
      : 'green'
  "
>
  Red
</button>
<button
  [style.background-color]="
    canSave
      ? 'cyan'
      : 'grey'
  "
>
  Save
</button>

<button
  [style.font-size.em]="
    isSpecial
      ? 3
      : 1
  "
>
  Big
</button>
<button
  [style.font-size.%]="
    !isSpecial
      ? 150
      : 50
  "
>
  Small
</button>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  event binding
-->
<hr />
<h2
  id="event-binding"
>
  Event
  Binding
</h2>

<button
  (click)="
    onSave()
  "
>
  Save
</button>

<button
  on-click="
    onSave()
  "
>
  On
  Save
</button>

<div>
  <!--
    \`myClick\` is an event on the custom \`ClickDirective\`
  -->
  <div
    (myClick)="
      clickMessage = $event
    "
    clickable
  >
    click
    with
    myClick
  </div>
  {{
    clickMessage
  }}
</div>

<!--
  binding to a nested component
-->
<app-hero-detail
  (deleteRequest)="
    deleteHero(
      $event
    )
  "
  [hero]="
    currentHero
  "
></app-hero-detail>
<br />

<app-big-hero-detail
  (deleteRequest)="
    deleteHero(
      $event
    )
  "
  [hero]="
    currentHero
  "
>
</app-big-hero-detail>

<div
  class="parent-div"
  (click)="
    onClickMe(
      $event
    )
  "
  clickable
>
  Click
  me
  <div
    class="child-div"
  >
    Click
    me
    too!
  </div>
</div>

<!--
  Will save only once
-->
<div
  (click)="
    onSave()
  "
  clickable
>
  <button
    (click)="
      onSave(
        $event
      )
    "
  >
    Save,
    no
    propagation
  </button>
</div>

<!--
  Will save twice
-->
<div
  (click)="
    onSave()
  "
  clickable
>
  <button
    (click)="
      onSave()
    "
  >
    Save
    w/
    propagation
  </button>
</div>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<hr />
<h2
  id="two-way"
>
  Two-way
  Binding
</h2>
<div
  id="two-way-1"
>
  <app-sizer
    [(size)]="
      fontSizePx
    "
  ></app-sizer>
  <div
    [style.font-size.px]="
      fontSizePx
    "
  >
    Resizable
    Text
  </div>
  <label
    >FontSize
    (px):
    <input
      [(ngModel)]="
        fontSizePx
      "
  /></label>
</div>
<br />
<div
  id="two-way-2"
>
  <h3>
    De-sugared
    two-way
    binding
  </h3>
  <app-sizer
    [size]="
      fontSizePx
    "
    (sizeChange)="
      fontSizePx = $event
    "
  ></app-sizer>
</div>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  Two way data binding unwound;
  passing the changed display value to the event handler via \`$event\`
-->
<hr />
<h2
  id="ngModel"
>
  NgModel
  (two-way)
  Binding
</h2>

<h3>
  Result:
  {{
    currentHero.name
  }}
</h3>

<input
  [value]="
    currentHero.name
  "
  (input)="
    currentHero.name =
      $event.target.value
  "
/>
without
NgModel
<br />
<input
  [(ngModel)]="
    currentHero.name
  "
/>
[(ngModel)]
<br />
<input
  bindon-ngModel="
    currentHero.name
  "
/>
bindon-ngModel
<br />
<input
  [ngModel]="
    currentHero.name
  "
  (ngModelChange)="
    currentHero.name = $event
  "
/>
(ngModelChange)="...name=$event"
<br />
<input
  [ngModel]="
    currentHero.name
  "
  (ngModelChange)="
    setUppercaseName(
      $event
    )
  "
/>
(ngModelChange)="setUppercaseName($event)"

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  NgClass binding
-->
<hr />
<h2
  id="ngClass"
>
  NgClass
  Binding
</h2>

<p>
  currentClasses
  is
  {{
    currentClasses
      | json
  }}
</p>
<div
  [ngClass]="
    currentClasses
  "
>
  This
  div
  is
  initially
  saveable,
  unchanged,
  and
  special
</div>

<!--
  not used in chapter
-->
<br />
<label
  >saveable
  <input
    type="checkbox"
    [(ngModel)]="
      canSave
    "
/></label>
|
<label
  >modified:
  <input
    type="checkbox"
    [value]="
      !isUnchanged
    "
    (change)="
      isUnchanged = !isUnchanged
    "
/></label>
|
<label
  >special:
  <input
    type="checkbox"
    [(ngModel)]="
      isSpecial
    "
/></label>
<button
  (click)="
    setCurrentClasses()
  "
>
  Refresh
  currentClasses
</button>
<br /><br />
<div
  [ngClass]="
    currentClasses
  "
>
  This
  div
  should
  be
  {{
    canSave
      ? ""
      : "not"
  }}
  saveable,
  {{
    isUnchanged
      ? "unchanged"
      : "modified"
  }}
  and,
  {{
    isSpecial
      ? ""
      : "not"
  }}
  special
  after
  clicking
  "Refresh".
</div>
<br /><br />

<div
  [ngClass]="
    isSpecial
      ? 'special'
      : ''
  "
>
  This
  div
  is
  special
</div>

<div
  class="bad curly special"
>
  Bad
  curly
  special
</div>
<div
  [ngClass]="{
    bad: false,
    curly: true,
    special: true
  }"
>
  Curly
  special
</div>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  NgStyle binding
-->
<hr />
<h2
  id="ngStyle"
>
  NgStyle
  Binding
</h2>

<div
  [style.font-size]="
    isSpecial
      ? 'x-large'
      : 'smaller'
  "
>
  This
  div
  is
  x-large
  or
  smaller.
</div>

<h3>
  [ngStyle]
  binding
  to
  currentStyles
  -
  CSS
  property
  names
</h3>
<p>
  currentStyles
  is
  {{
    currentStyles
      | json
  }}
</p>
<div
  [ngStyle]="
    currentStyles
  "
>
  This
  div
  is
  initially
  italic,
  normal
  weight,
  and
  extra
  large
  (24px).
</div>

<!--
  not used in chapter
-->
<br />
<label
  >italic:
  <input
    type="checkbox"
    [(ngModel)]="
      canSave
    "
/></label>
|
<label
  >normal:
  <input
    type="checkbox"
    [(ngModel)]="
      isUnchanged
    "
/></label>
|
<label
  >xlarge:
  <input
    type="checkbox"
    [(ngModel)]="
      isSpecial
    "
/></label>
<button
  (click)="
    setCurrentStyles()
  "
>
  Refresh
  currentStyles
</button>
<br /><br />
<div
  [ngStyle]="
    currentStyles
  "
>
  This
  div
  should
  be
  {{
    canSave
      ? "italic"
      : "plain"
  }},
  {{
    isUnchanged
      ? "normal weight"
      : "bold"
  }}
  and,
  {{
    isSpecial
      ? "extra large"
      : "normal size"
  }}
  after
  clicking
  "Refresh".
</div>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  NgIf binding
-->
<hr />
<h2
  id="ngIf"
>
  NgIf
  Binding
</h2>

<app-hero-detail
  *ngIf="
    isActive
  "
></app-hero-detail>

<div
  *ngIf="
    currentHero
  "
>
  Hello,
  {{
    currentHero.name
  }}
</div>
<div
  *ngIf="
    nullHero
  "
>
  Hello,
  {{
    nullHero.name
  }}
</div>

<!--
  NgIf binding with template (no *)
-->

<ng-template
  [ngIf]="
    currentHero
  "
  >Add
  {{
    currentHero.name
  }}
  with
  template</ng-template
>

<!--
  Does not show because isActive is false!
-->
<div>
  Hero
  Detail
  removed
  from
  DOM
  (via
  template)
  because
  isActive
  is
  false
</div>
<ng-template
  [ngIf]="
    isActive
  "
>
  <app-hero-detail></app-hero-detail>
</ng-template>

<!--
  isSpecial is true
-->
<div
  [class.hidden]="
    !isSpecial
  "
>
  Show
  with
  class
</div>
<div
  [class.hidden]="
    isSpecial
  "
>
  Hide
  with
  class
</div>

<!--
  HeroDetail is in the DOM but hidden
-->
<app-hero-detail
  [class.hidden]="
    isSpecial
  "
></app-hero-detail>

<div
  [style.display]="
    isSpecial
      ? 'block'
      : 'none'
  "
>
  Show
  with
  style
</div>
<div
  [style.display]="
    isSpecial
      ? 'none'
      : 'block'
  "
>
  Hide
  with
  style
</div>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  NgFor binding
-->
<hr />
<h2
  id="ngFor"
>
  NgFor
  Binding
</h2>

<div
  class="box"
>
  <div
    *ngFor="
      let hero of heroes
    "
  >
    {{
      hero.name
    }}
  </div>
</div>
<br />

<div
  class="box"
>
  <!--
    *ngFor w/ hero-detail Component
  -->
  <app-hero-detail
    *ngFor="
      let hero of heroes
    "
    [hero]="
      hero
    "
  ></app-hero-detail>
</div>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<h4
  id="ngFor-index"
>
  *ngFor
  with
  index
</h4>
<p>
  with
  <i
    >semi-colon</i
  >
  separator
</p>
<div
  class="box"
>
  <div
    *ngFor="
      let hero of heroes;
      let i = index
    "
  >
    {{
      i +
        1
    }}
    -
    {{
      hero.name
    }}
  </div>
</div>

<p>
  with
  <i
    >comma</i
  >
  separator
</p>
<div
  class="box"
>
  <!--
    Ex: "1 - Hercules"
  -->
  <div
    *ngFor="
      let hero of heroes;
      let i = index
    "
  >
    {{
      i +
        1
    }}
    -
    {{
      hero.name
    }}
  </div>
</div>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<h4
  id="ngFor-trackBy"
>
  *ngFor
  trackBy
</h4>
<button
  (click)="
    resetHeroes()
  "
>
  Reset
  heroes
</button>
<button
  (click)="
    changeIds()
  "
>
  Change
  ids
</button>
<button
  (click)="
    clearTrackByCounts()
  "
>
  Clear
  counts
</button>

<p>
  <i
    >without</i
  >
  trackBy
</p>
<div
  class="box"
>
  <div
    #noTrackBy
    *ngFor="
      let hero of heroes
    "
  >
    ({{
      hero.id
    }})
    {{
      hero.name
    }}
  </div>

  <div
    id="noTrackByCnt"
    *ngIf="
      heroesNoTrackByCount
    "
  >
    Hero
    DOM
    elements
    change
    #{{
      heroesNoTrackByCount
    }}
    without
    trackBy
  </div>
</div>

<p>
  with
  trackBy
</p>
<div
  class="box"
>
  <div
    #withTrackBy
    *ngFor="
      let hero of heroes;
      trackBy: trackByHeroes
    "
  >
    ({{
      hero.id
    }})
    {{
      hero.name
    }}
  </div>

  <div
    id="withTrackByCnt"
    *ngIf="
      heroesWithTrackByCount
    "
  >
    Hero
    DOM
    elements
    change
    #{{
      heroesWithTrackByCount
    }}
    with
    trackBy
  </div>
</div>

<br /><br /><br />

<p>
  with
  trackBy
  and
  <i
    >semi-colon</i
  >
  separator
</p>
<div
  class="box"
>
  <div
    *ngFor="
      let hero of heroes;
      trackBy: trackByHeroes
    "
  >
    ({{
      hero.id
    }})
    {{
      hero.name
    }}
  </div>
</div>

<p>
  with
  trackBy
  and
  <i
    >comma</i
  >
  separator
</p>
<div
  class="box"
>
  <div
    *ngFor="
      let hero of heroes;
      trackBy: trackByHeroes
    "
  >
    ({{
      hero.id
    }})
    {{
      hero.name
    }}
  </div>
</div>

<p>
  with
  trackBy
  and
  <i
    >space</i
  >
  separator
</p>
<div
  class="box"
>
  <div
    *ngFor="
      let hero of heroes;
      trackBy: trackByHeroes
    "
  >
    ({{
      hero.id
    }})
    {{
      hero.name
    }}
  </div>
</div>

<p>
  with
  <i
    >generic</i
  >
  trackById
  function
</p>
<div
  class="box"
>
  <div
    *ngFor="
      let hero of heroes;
      trackBy: trackById
    "
  >
    ({{
      hero.id
    }})
    {{
      hero.name
    }}
  </div>
</div>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  NgSwitch binding
-->
<hr />
<h2
  id="ngSwitch"
>
  NgSwitch
  Binding
</h2>

<p>
  Pick
  your
  favorite
  hero
</p>
<div>
  <label
    *ngFor="
      let h of heroes
    "
  >
    <input
      type="radio"
      name="heroes"
      [(ngModel)]="
        currentHero
      "
      [value]="
        h
      "
    />{{
      h.name
    }}
  </label>
</div>

<div
  [ngSwitch]="
    currentHero.emotion
  "
>
  <app-happy-hero
    *ngSwitchCase="
      'happy'
    "
    [hero]="
      currentHero
    "
  ></app-happy-hero>
  <app-sad-hero
    *ngSwitchCase="
      'sad'
    "
    [hero]="
      currentHero
    "
  ></app-sad-hero>
  <app-confused-hero
    *ngSwitchCase="
      'confused'
    "
    [hero]="
      currentHero
    "
  ></app-confused-hero>
  <div
    *ngSwitchCase="
      'confused'
    "
  >
    Are
    you
    as
    confused
    as
    {{
      currentHero.name
    }}?
  </div>
  <app-unknown-hero
    *ngSwitchDefault
    [hero]="
      currentHero
    "
  ></app-unknown-hero>
</div>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  template reference variable
-->
<hr />
<h2
  id="ref-vars"
>
  Template
  reference
  variables
</h2>

<input
  #phone
  placeholder="phone number"
/>

<!--
  lots of other elements
-->

<!--
  phone refers to the input element; pass its \`value\` to an event handler
-->
<button
  (click)="
    callPhone(
      phone.value
    )
  "
>
  Call
</button>

<input
  ref-fax
  placeholder="fax number"
/>
<button
  (click)="
    callFax(
      fax.value
    )
  "
>
  Fax
</button>

<!--
  btn refers to the button element; show its disabled state
-->
<button
  #btn
  disabled
  [innerHTML]="
    'disabled by attribute: ' +
    btn.disabled
  "
></button>

<h4>
  Example
  Form
</h4>
<app-hero-form
  [hero]="
    currentHero
  "
></app-hero-form>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  inputs and output
-->
<hr />
<h2
  id="inputs-and-outputs"
>
  Inputs
  and
  Outputs
</h2>

<img
  [src]="
    iconUrl
  "
/>
<button
  (click)="
    onSave()
  "
>
  Save
</button>

<app-hero-detail
  [hero]="
    currentHero
  "
  (deleteRequest)="
    deleteHero(
      $event
    )
  "
>
</app-hero-detail>

<div
  (myClick)="
    clickMessage2 = $event
  "
  clickable
>
  myClick2
</div>
{{
  clickMessage2
}}

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  Pipes
-->
<hr />
<h2
  id="pipes"
>
  Pipes
</h2>

<div>
  Title
  through
  uppercase
  pipe:
  {{
    title
      | uppercase
  }}
</div>

<!--
  Pipe chaining: convert title to uppercase, then to lowercase
-->
<div>
  Title
  through
  a
  pipe
  chain:
  {{
    title
      | uppercase
      | lowercase
  }}
</div>

<!--
  pipe with configuration argument => "February 25, 1970"
-->
<div>
  Birthdate:
  {{
    currentHero?.birthdate
      | date
        : "longDate"
  }}
</div>

<div>
  {{
    currentHero
      | json
  }}
</div>

<div>
  Birthdate:
  {{
    currentHero?.birthdate
      | date
        : "longDate"
      | uppercase
  }}
</div>

<div>
  <!--
    pipe price to USD and display the $ symbol
  -->
  <label
    >Price: </label
  >{{
    product.price
      | currency
        : "USD"
        : true
  }}
</div>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  Null values and the safe navigation operator
-->
<hr />
<h2
  id="safe-navigation-operator"
>
  Safe
  navigation
  operator
  <i
    >?.</i
  >
</h2>

<div>
  The
  title
  is
  {{
    title
  }}
</div>

<div>
  The
  current
  hero's
  name
  is
  {{
    currentHero?.name
  }}
</div>

<div>
  The
  current
  hero's
  name
  is
  {{
    currentHero.name
  }}
</div>

<!--
  The null hero's name is {{nullHero.name}}

  See console log:
    TypeError: Cannot read property 'name' of null in [null]
-->

<!--
  No hero, div not displayed, no error
-->
<div
  *ngIf="
    nullHero
  "
>
  The
  null
  hero's
  name
  is
  {{
    nullHero.name
  }}
</div>

<div>
  The
  null
  hero's
  name
  is
  {{
    nullHero &&
      nullHero.name
  }}
</div>

<div>
  <!--
    No hero, no problem!
  -->
  The
  null
  hero's
  name
  is
  {{
    nullHero?.name
  }}
</div>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  non-null assertion operator
-->
<hr />
<h2
  id="non-null-assertion-operator"
>
  Non-null
  assertion
  operator
  <i
    >!.</i
  >
</h2>

<div>
  <!--
    No hero, no text
  -->
  <div
    *ngIf="
      hero
    "
  >
    The
    hero's
    name
    is
    {{
      hero!
        .name
    }}
  </div>
</div>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  non-null assertion operator
-->
<hr />
<h2
  id="any-type-cast-function"
>
  $any
  type
  cast
  function
  <i
    >$any(
    )</i
  >.
</h2>

<div>
  <!--
    Accessing an undeclared member
  -->
  <div>
    The
    hero's
    marker
    is
    {{
      $any(
        hero
      )
        .marker
    }}
  </div>
</div>

<div>
  <!--
    Accessing an undeclared member
  -->
  <div>
    Undeclared
    members
    is
    {{$any(this).member}}
  </div>
</div>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  TODO: discuss this in the Style binding section
-->
<!--
  enums in bindings
-->
<hr />
<h2
  id="enums"
>
  Enums
  in
  binding
</h2>

<p>
  The
  name
  of
  the
  Color.Red
  enum
  is
  {{
    Color[
      Color
        .Red
    ]
  }}.<br />
  The
  current
  color
  is
  {{
    Color[
      color
    ]
  }}
  and
  its
  number
  is
  {{
    color
  }}.<br />
  <button
    [style.color]="
      Color[
        color
      ]
    "
    (click)="
      colorToggle()
    "
  >
    Enum
    Toggle
  </button>
</p>

<a
  class="to-toc"
  href="#toc"
  >top</a
>

<!--
  Copyright 2017-2018 Google Inc. All Rights Reserved.
  Use of this source code is governed by an MIT-style license that
  can be found in the LICENSE file at http://angular.io/license
-->

<div
  id="heroForm"
>
  <form
    (ngSubmit)="
      onSubmit(
        heroForm
      )
    "
    #heroForm="ngForm"
  >
    <div
      class="form-group"
    >
      <label
        for="name"
        >Name
        <input
          class="form-control"
          name="name"
          required
          [(ngModel)]="
            hero.name
          "
        />
      </label>
    </div>
    <button
      type="submit"
      [disabled]="
        !heroForm
          .form
          .valid
      "
    >
      Submit
    </button>
  </form>
  <div
    [hidden]="
      !heroForm
        .form
        .valid
    "
  >
    {{
      submitMessage
    }}
  </div>
</div>

<!--
  Copyright 2017-2018 Google Inc. All Rights Reserved.
  Use of this source code is governed by an MIT-style license that
  can be found in the LICENSE file at http://angular.io/license
-->

`;