<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview" target="_self"><input type="hidden" name="files[app/app.component.ts]" value="/* tslint:disable:forin member-ordering */

import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren } from '@angular/core';

import { Hero } from './hero';

// Alerter fn: monkey patch during test
export function alerter(msg?: string) {
  window.alert(msg);
}

export enum Color {Red, Green, Blue};

/**
 * Giant grab bag of stuff to drive the chapter
 */
@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit, OnInit {

  ngOnInit() {
    this.resetHeroes();
    this.setCurrentClasses();
    this.setCurrentStyles();
  }

  ngAfterViewInit() {
    // Detect effects of NgForTrackBy
    trackChanges(this.heroesNoTrackBy,   () => this.heroesNoTrackByCount += 1);
    trackChanges(this.heroesWithTrackBy, () => this.heroesWithTrackByCount += 1);
  }

  @ViewChildren('noTrackBy')   heroesNoTrackBy:   QueryList<ElementRef>;
  @ViewChildren('withTrackBy') heroesWithTrackBy: QueryList<ElementRef>;

  actionName = 'Go for it';
  alert = alerter;
  badCurly = 'bad curly';
  classes = 'special';

  callFax(value: string)   {this.alert(`Faxing ${value} ...`); }
  callPhone(value: string) {this.alert(`Calling ${value} ...`); }
  canSave =  true;

  changeIds() {
    this.resetHeroes();
    this.heroes.forEach(h => h.id += 10 * this.heroIdIncrement++);
    this.heroesWithTrackByCountReset = -1;
  }

  clearTrackByCounts() {
    const trackByCountReset = this.heroesWithTrackByCountReset;
    this.resetHeroes();
    this.heroesNoTrackByCount = -1;
    this.heroesWithTrackByCount = trackByCountReset;
    this.heroIdIncrement = 1;
  }

  clicked = '';
  clickMessage = '';
  clickMessage2 = '';

  Color = Color;
  color = Color.Red;
  colorToggle() {this.color = (this.color === Color.Red) ? Color.Blue : Color.Red; }

  currentHero: Hero;

  deleteHero(hero: Hero) {
    this.alert(`Delete ${hero ? hero.name : 'the hero'}.`);
  }

  evilTitle = 'Template <script>alert(&quot;evil never sleeps&quot;)</script>Syntax';

  fontSizePx = 16;

  title = 'Template Syntax';

  getStyles(el: Element) {
    let styles = window.getComputedStyle(el);
    let showStyles = {};
    for (let p in this.currentStyles) { // only interested in these styles
      showStyles[p] = styles[p];
    }
    return JSON.stringify(showStyles);
  }

  getVal() { return this.val; }

  hero: Hero; // defined to demonstrate template context precedence
  heroes: Hero[];

  // trackBy change counting
  heroesNoTrackByCount   = 0;
  heroesWithTrackByCount = 0;
  heroesWithTrackByCountReset = 0;

  heroIdIncrement = 1;

  // heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
  // Public Domain terms of use: http://www.wpclipart.com/terms.html
  heroImageUrl = 'images/hero.png';

  iconUrl = 'images/ng-logo.png';
  isActive = false;
  isSpecial = true;
  isUnchanged = true;

  nullHero: Hero = null;

  onCancel(event: KeyboardEvent) {
    let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).innerHTML : '';
    this.alert('Canceled.' + evtMsg);
  }

  onClickMe(event: KeyboardEvent) {
    let evtMsg = event ? ' Event target class is ' + (<HTMLElement>event.target).className  : '';
    this.alert('Click me.' + evtMsg);
  }

  onSave(event: KeyboardEvent) {
    let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).innerText : '';
    this.alert('Saved.' + evtMsg);
  }

  onSubmit() { /* referenced but not used */}

  product = {
    name: 'frimfram',
    price: 42
  };

  // updates with fresh set of cloned heroes
  resetHeroes() {
    this.heroes = Hero.heroes.map(hero => hero.clone());
    this.currentHero = this.heroes[0];
    this.heroesWithTrackByCountReset = 0;
  }

  private samenessCount = 5;
  moreOfTheSame() { this.samenessCount++; };
  get sameAsItEverWas() {
    let result: string[] = Array(this.samenessCount);
    for ( let i = result.length; i-- > 0; ) { result[i] = 'same as it ever was ...'; }
    return result;
    // return [1,2,3,4,5].map(id => {
    //   return {id:id, text: 'same as it ever was ...'};
    // });
  }

  setUppercaseName(name: string) {
    this.currentHero.name = name.toUpperCase();
  }

  currentClasses: {};
  setCurrentClasses() {
    // CSS classes: added/removed per current state of component properties
    this.currentClasses =  {
      saveable: this.canSave,
      modified: !this.isUnchanged,
      special:  this.isSpecial
    };
  }

  currentStyles: {};
  setCurrentStyles() {
    this.currentStyles = {
      // CSS styles: set per current state of component properties
      'font-style':  this.canSave      ? 'italic' : 'normal',
      'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
      'font-size':   this.isSpecial    ? '24px'   : '12px'
    };
  }

  trackByHeroes(index: number, hero: Hero): number { return hero.id; }

  trackById(index: number, item: any): number { return item['id']; }

  val = 2;
  // villainImageUrl = 'http://www.clker.com/cliparts/u/s/y/L/x/9/villain-man-hi.png'
  // Public Domain terms of use http://www.clker.com/disclaimer.html
  villainImageUrl = 'images/villain.png';
}

// helper to track changes to viewChildren
function trackChanges(views: QueryList<ElementRef>, changed: () => void) {
  let oldRefs = views.toArray();
  views.changes.subscribe((changes: QueryList<ElementRef>) => {
      const changedRefs = changes.toArray();
      // Is every changed ElemRef the same as old and in the same position
      const isSame = oldRefs.every((v, i) => v === changedRefs[i]);
      if (!isSame) {
        oldRefs = changedRefs;
        // wait a tick because called after views are constructed
        setTimeout(changed, 0);
      }
  });
}


/*
Copyright 2016 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
*/"><input type="hidden" name="files[app/app.module.1.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular

/* Other imports */

@NgModule({
  imports: [
    BrowserModule,
    FormsModule  // <--- import into the NgModule
  ],
  /* Other module metadata */
})
export class AppModule { }


/*
Copyright 2016 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
*/"><input type="hidden" name="files[app/app.module.ts]" value="import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';

import { AppComponent } from './app.component';
import { BigHeroDetailComponent, HeroDetailComponent } from './hero-detail.component';
import { ClickDirective, ClickDirective2 } from './click.directive';
import { HeroFormComponent }      from './hero-form.component';
import { heroSwitchComponents }   from './hero-switch.components';
import { SizerComponent }         from './sizer.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    BigHeroDetailComponent,
    HeroDetailComponent,
    HeroFormComponent,
    heroSwitchComponents,
    ClickDirective,
    ClickDirective2,
    SizerComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }


/*
Copyright 2016 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
*/"><input type="hidden" name="files[app/click.directive.ts]" value="/* tslint:disable use-output-property-decorator */
import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';

@Directive({selector: '[myClick]'})
export class ClickDirective {
  @Output('myClick') clicks = new EventEmitter<string>(); //  @Output(alias) propertyName = ...

  toggle = false;

  constructor(el: ElementRef) {
    el.nativeElement
      .addEventListener('click', (event: Event) => {
        this.toggle = !this.toggle;
        this.clicks.emit(this.toggle ? 'Click!' : '');
      });
  }
}

@Directive({
  selector: '[myClick2]',
  outputs: ['clicks:myClick']  // propertyName:alias
})
export class ClickDirective2 {
  clicks = new EventEmitter<string>();
  toggle = false;

  constructor(el: ElementRef) {
    el.nativeElement
      .addEventListener('click', (event: Event) => {
        this.toggle = !this.toggle;
        this.clicks.emit(this.toggle ? 'Click2!' : '');
      });
  }
}


/*
Copyright 2016 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
*/"><input type="hidden" name="files[app/hero-detail.component.ts]" value="/* tslint:disable use-input-property-decorator use-output-property-decorator */
import { Component, EventEmitter, Input, Output } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'hero-detail',
  inputs: ['hero'],
  outputs: ['deleteRequest'],
  styles: ['button { margin-left: 8px} div {margin: 8px 0} img {height:24px}'],
  template: `
  <div>
    <img src=&quot;{{heroImageUrl}}&quot;>
    <span [style.text-decoration]=&quot;lineThrough&quot;>
      {{prefix}} {{hero?.name}}
    </span>
    <button (click)=&quot;delete()&quot;>Delete</button>
  </div>`
})
export class HeroDetailComponent {
  hero: Hero = new Hero(-1, '', 'Zzzzzzzz'); // default sleeping hero
  // heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
  // Public Domain terms of use: http://www.wpclipart.com/terms.html
  heroImageUrl = 'images/hero.png';
  lineThrough = '';
  @Input() prefix = '';

  // This component make a request but it can't actually delete a hero.
  deleteRequest = new EventEmitter<Hero>();

  delete() {
    this.deleteRequest.emit(this.hero);
    this.lineThrough = this.lineThrough ? '' : 'line-through';
  }
}

@Component({
  selector: 'big-hero-detail',
  template: `
  <div class=&quot;detail&quot;>
    <img src=&quot;{{heroImageUrl}}&quot;>
    <div><b>{{hero?.name}}</b></div>
    <div>Name: {{hero?.name}}</div>
    <div>Emotion: {{hero?.emotion}}</div>
    <div>Birthdate: {{hero?.birthdate | date:'longDate'}}</div>
    <div>Web: <a href=&quot;{{hero?.url}}&quot; target=&quot;_blank&quot;>{{hero?.url}}</a></div>
    <div>Rate/hr: {{hero?.rate | currency:'EUR'}}</div>
    <br clear=&quot;all&quot;>
    <button (click)=&quot;delete()&quot;>Delete</button>
  </div>
  `,
  styles: [`
    .detail { border: 1px solid black; padding: 4px; max-width: 450px; }
    img     { float: left; margin-right: 8px; height: 100px; }
  `]
})
export class BigHeroDetailComponent extends HeroDetailComponent {

  @Input()  hero: Hero;
  @Output() deleteRequest = new EventEmitter<Hero>();

  delete() {
    this.deleteRequest.emit(this.hero);
  }
}


/*
Copyright 2016 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
*/"><input type="hidden" name="files[app/hero-form.component.ts]" value="import { Component, Input, ViewChild } from '@angular/core';
import { NgForm }                      from '@angular/forms';

import { Hero } from './hero';

@Component({
  moduleId: module.id,
  selector: 'hero-form',
  templateUrl: './hero-form.component.html',
  styles: [`
    button { margin: 6px 0; }
    #heroForm { border: 1px solid black; margin: 20px 0; padding: 8px; max-width: 350px; }
  `]
})
export class HeroFormComponent {
  @Input() hero: Hero;
  @ViewChild('heroForm') form: NgForm;

  private _submitMessage = '';

  get submitMessage() {
    if (!this.form.valid) {
      this._submitMessage = '';
    }
    return this._submitMessage;
  }

  onSubmit(form: NgForm) {
    this._submitMessage =  'Submitted. form value is ' + JSON.stringify(form.value);
  }
}


/*
Copyright 2016 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
*/"><input type="hidden" name="files[app/hero-switch.components.ts]" value="import { Component, Input } from '@angular/core';
import { Hero } from './hero';

@Component({
  selector: 'happy-hero',
  template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
})
export class HappyHeroComponent {
  @Input() hero: Hero;
}

@Component({
  selector: 'sad-hero',
  template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
})
export class SadHeroComponent {
  @Input() hero: Hero;
}

@Component({
  selector: 'confused-hero',
  template: `Are you as confused as {{hero.name}}?`
})
export class ConfusedHeroComponent {
  @Input() hero: Hero;
}

@Component({
  selector: 'unknown-hero',
  template: `{{message}}`
})
export class UnknownHeroComponent {
  @Input() hero: Hero;
  get message() {
    return this.hero &amp;&amp; this.hero.name ?
      `${this.hero.name} is strange and mysterious.` :
      'Are you feeling indecisive?';
  }
}

export const heroSwitchComponents =
  [ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, UnknownHeroComponent ];


/*
Copyright 2016 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
*/"><input type="hidden" name="files[app/hero.ts]" value="export class Hero {
  static nextId = 1;

  static heroes: Hero[] = [
    new Hero(
      325,
      'Hercules',
      'happy',
      new Date(1970, 1, 25),
      'http://www.imdb.com/title/tt0065832/'
    ),
    new Hero(1, 'Mr. Nice',  'happy'),
    new Hero(2, 'Narco',     'sad' ),
    new Hero(3, 'Windstorm', 'confused' ),
    new Hero(4, 'Magneta')
  ];


  constructor(
    public id?: number,
    public name?: string,
    public emotion?: string,
    public birthdate?: Date,
    public url?: string,
    public rate = 100,
    ) {
    this.id = id ? id : Hero.nextId++;
  }

  clone(): Hero {
    return Object.assign(new Hero(), this);
  }
}


/*
Copyright 2016 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
*/"><input type="hidden" name="files[app/sizer.component.ts]" value="import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'my-sizer',
  template: `
  <div>
    <button (click)=&quot;dec()&quot; title=&quot;smaller&quot;>-</button>
    <button (click)=&quot;inc()&quot; title=&quot;bigger&quot;>+</button>
    <label [style.font-size.px]=&quot;size&quot;>FontSize: {{size}}px</label>
  </div>`
})
export class SizerComponent {
  @Input()  size: number | string;
  @Output() sizeChange = new EventEmitter<number>();

  dec() { this.resize(-1); }
  inc() { this.resize(+1); }

  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}


/*
Copyright 2016 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
*/"><input type="hidden" name="files[main.ts]" value="import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);


/*
Copyright 2016 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
*/"><input type="hidden" name="files[app/app.component.css]" value="a.to-toc { margin: 30px 0; }
button { font-size: 100%; margin: 0 2px; }
div[clickable] {cursor: pointer; max-width: 200px; margin: 16px 0}
#noTrackByCnt, #withTrackByCnt {color: darkred; max-width: 450px; margin: 4px;}
img {height: 100px;}
.box {border: 1px solid black; padding: 6px; max-width: 450px;}
.child-div {margin-left: 1em; font-weight: normal}
.context {margin-left: 1em;}
.hidden {display: none}
.parent-div {margin-top: 1em; font-weight: bold}
.special {font-weight:bold; font-size: x-large}
.bad {color: red;}
.saveable {color: limegreen;}
.curly, .modified {font-family: &quot;Brush Script MT&quot;}
.toe {margin-left: 1em; font-style: italic;}
little-hero {color:blue; font-size: smaller; background-color: Turquoise }
.to-toc {margin-top: 10px; display: block}


/*
Copyright 2016 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
*/"><input type="hidden" name="files[styles.css]" value="/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}
a {
  cursor: pointer;
  cursor: hand;
}
button {
  font-family: Arial;
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
}
button:hover {
  background-color: #cfd8dc;
}
button:disabled {
  background-color: #eee;
  color: #aaa;
  cursor: auto;
}

/* Navigation link styles */
nav a {
  padding: 5px 10px;
  text-decoration: none;
  margin-right: 10px;
  margin-top: 10px;
  display: inline-block;
  background-color: #eee;
  border-radius: 4px;
}
nav a:visited, a:link {
  color: #607D8B;
}
nav a:hover {
  color: #039be5;
  background-color: #CFD8DC;
}
nav a.active {
  color: #039be5;
}

/* items class */
.items {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 24em;
}
.items li {
  cursor: pointer;
  position: relative;
  left: 0;
  background-color: #EEE;
  margin: .5em;
  padding: .3em 0;
  height: 1.6em;
  border-radius: 4px;
}
.items li:hover {
  color: #607D8B;
  background-color: #DDD;
  left: .1em;
}
.items li.selected {
  background-color: #CFD8DC;
  color: white;
}
.items li.selected:hover {
  background-color: #BBD8DC;
}
.items .text {
  position: relative;
  top: -3px;
}
.items .badge {
  display: inline-block;
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0 0.7em;
  background-color: #607D8B;
  line-height: 1em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 1.8em;
  margin-right: .8em;
  border-radius: 4px 0 0 4px;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}


/*
Copyright 2016 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
*/"><input type="hidden" name="files[template-syntax.css]" value="fieldset {border-style:none}
img {height: 100px;}
.box {border: 1px solid black; padding:3px}
.child-div {margin-left: 1em; font-weight: normal}
.hidden {display: none}
.parent-div {margin-top: 1em; font-weight: bold}
.special {font-weight:bold; font-size: x-large}
.bad {color: red;}
.saveable {color: limegreen;}
.curly, .modified {font-family: &quot;Brush Script MT&quot;}
.toe {margin-left: 1em; font-style: italic;}
little-hero {color:blue; font-size: smaller; background-color: Turquoise }
.to-toc {margin-top: 10px; display: block}


/*
Copyright 2016 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
*/"><input type="hidden" name="files[app/app.component.html]" value="<a id=&quot;toc&quot;></a>
<h1>Template Syntax</h1>
<a href=&quot;#interpolation&quot;>Interpolation</a><br>
<a href=&quot;#expression-context&quot;>Expression context</a><br>
<a href=&quot;#statement-context&quot;>Statement context</a><br>
<a href=&quot;#mental-model&quot;>Mental Model</a><br>
<a href=&quot;#buttons&quot;>Buttons</a><br>
<a href=&quot;#prop-vs-attrib&quot;>Properties vs. Attributes</a><br>
<br>
<a href=&quot;#property-binding&quot;>Property Binding</a><br>
<div style=&quot;margin-left:8px&quot;>
  <a href=&quot;#attribute-binding&quot;>Attribute Binding</a><br>
  <a href=&quot;#class-binding&quot;>Class Binding</a><br>
  <a href=&quot;#style-binding&quot;>Style Binding</a><br>
</div>
<br>
<a href=&quot;#event-binding&quot;>Event Binding</a><br>
<a href=&quot;#two-way&quot;>Two-way Binding</a><br>
<br>
<div>Directives</div>
<div style=&quot;margin-left:8px&quot;>
  <a href=&quot;#ngModel&quot;>NgModel (two-way) Binding</a><br>
  <a href=&quot;#ngClass&quot;>NgClass Binding</a><br>
  <a href=&quot;#ngStyle&quot;>NgStyle Binding</a><br>
  <a href=&quot;#ngIf&quot;>NgIf</a><br>
  <a href=&quot;#ngFor&quot;>NgFor</a><br>
  <div style=&quot;margin-left:8px&quot;>
    <a href=&quot;#ngFor-index&quot;>NgFor with index</a><br>
    <a href=&quot;#ngFor-trackBy&quot;>NgFor with trackBy</a><br>
  </div>
  <a href=&quot;#ngSwitch&quot;>NgSwitch</a><br>
</div>
<br>
<a href=&quot;#ref-vars&quot;>Template reference variables</a><br>
<a href=&quot;#inputs-and-outputs&quot;>Inputs and outputs</a><br>
<a href=&quot;#pipes&quot;>Pipes</a><br>
<a href=&quot;#safe-navigation-operator&quot;>Safe navigation operator <i>?.</i></a><br>
<a href=&quot;#enums&quot;>Enums</a><br>

<!-- Interpolation and expressions -->
<hr><h2 id=&quot;interpolation&quot;>Interpolation</h2>

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

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

<!-- &quot;The sum of 1 + 1 is 2&quot; -->
<p>The sum of 1 + 1 is {{1 + 1}}</p>

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

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<hr><h2 id=&quot;expression-context&quot;>Expression context</h2>

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


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

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

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<hr><h2 id=&quot;statement-context&quot;>Statement context</h2>

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

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

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

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

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- New Mental Model -->
<hr><h2 id=&quot;mental-model&quot;>New Mental Model</h2>

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

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

<div>
  <!-- Bind button disabled state to `isUnchanged` property -->
  <button [disabled]=&quot;isUnchanged&quot;>Save</button>
</div>
<br><br>

<div>
  <img [src] = &quot;heroImageUrl&quot;>
  <hero-detail [hero]=&quot;currentHero&quot;></hero-detail>
  <div [ngClass] = &quot;{selected: isSelected}&quot;></div>
</div>
<br><br>

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

<div>
  Hero Name:
  <input [(ngModel)]=&quot;heroName&quot;>
  {{heroName}}
</div>
<br><br>

<button [attr.aria-label]=&quot;help&quot;>help</button>
<br><br>

<div [class.special]=&quot;isSpecial&quot;>Special</div>
<br><br>

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

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

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

<br><br>

<img [src]=&quot;iconUrl&quot;/>
<img bind-src=&quot;heroImageUrl&quot;/>
<img [attr.src]=&quot;villainImageUrl&quot;/>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- buttons -->
<hr><h2 id=&quot;buttons&quot;>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]=&quot;isUnchanged&quot;>disabled by property binding</button>
<br><br>
<button bind-disabled=&quot;isUnchanged&quot; on-click=&quot;onSave($event)&quot;>Disabled Cancel</button>
<button [disabled]=&quot;!canSave&quot; (click)=&quot;onSave($event)&quot;>Enabled Save</button>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- property binding -->
<hr><h2 id=&quot;property-binding&quot;>Property Binding</h2>

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

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

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

<p><span>&quot;{{title}}&quot; is the <i>interpolated</i> title.</span></p>
<p>&quot;<span [innerHTML]=&quot;title&quot;></span>&quot; 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>&quot;{{evilTitle}}&quot; is the <i>interpolated</i> evil title.</span></p>
<p>&quot;<span [innerHTML]=&quot;evilTitle&quot;></span>&quot; is the <i>property bound</i> evil title.</p>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- attribute binding -->
<hr><h2 id=&quot;attribute-binding&quot;>Attribute Binding</h2>

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

  <!-- ERROR: There is no `colspan` property to set!
    <tr><td colspan=&quot;{{1 + 1}}&quot;>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]=&quot;actionName&quot;>{{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]=&quot;isUnchanged&quot;>Disabled</button>

  <button [attr.disabled]=&quot;!isUnchanged&quot;>Disabled as well</button>

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

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- class binding -->
<hr><h2 id=&quot;class-binding&quot;>Class Binding</h2>

<!-- standard class attribute setting  -->
<div class=&quot;bad curly special&quot;>Bad curly special</div>

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

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

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

<div bind-class.special=&quot;isSpecial&quot;>This class binding is special too</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!--style binding -->
<hr><h2 id=&quot;style-binding&quot;>Style Binding</h2>

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

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

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- event binding -->
<hr><h2 id=&quot;event-binding&quot;>Event Binding</h2>

<button (click)=&quot;onSave()&quot;>Save</button>

<button on-click=&quot;onSave()&quot;>On Save</button>

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


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

<big-hero-detail
    (deleteRequest)=&quot;deleteHero($event)&quot;
    [hero]=&quot;currentHero&quot;>
</big-hero-detail>

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

<!-- Will save only once -->
<div (click)=&quot;onSave()&quot; clickable>
  <button (click)=&quot;onSave()&quot;>Save, no propagation</button>
</div>

<!-- Will save twice -->
<div (click)=&quot;onSave()&quot; clickable>
  <button (click)=&quot;onSave() || true&quot;>Save w/ propagation</button>
</div>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

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

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

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

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

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

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- NgClass binding -->
<hr><h2 id=&quot;ngClass&quot;>NgClass Binding</h2>

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

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

<div [ngClass]=&quot;isSpecial ? 'special' : ''&quot;>This div is special</div>

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

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- NgStyle binding -->
<hr><h2 id=&quot;ngStyle&quot;>NgStyle Binding</h2>

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

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

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

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- NgIf binding -->
<hr><h2 id=&quot;ngIf&quot;>NgIf Binding</h2>

<hero-detail *ngIf=&quot;isActive&quot;></hero-detail>

<div *ngIf=&quot;currentHero&quot;>Hello, {{currentHero.name}}</div>
<div *ngIf=&quot;nullHero&quot;>Hello, {{nullHero.name}}</div>

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

<template [ngIf]=&quot;currentHero&quot;>Add {{currentHero.name}} with template</template>

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

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

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

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

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- NgFor binding -->
<hr><h2 id=&quot;ngFor&quot;>NgFor Binding</h2>

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

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

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

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

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

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

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

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

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

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

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

<br><br><br>

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

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

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

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

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- NgSwitch binding -->
<hr><h2 id=&quot;ngSwitch&quot;>NgSwitch Binding</h2>

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

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

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

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

<input #phone placeholder=&quot;phone number&quot;>

<!-- lots of other elements -->

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

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

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

<h4>Example Form</h4>
<hero-form [hero]=&quot;currentHero&quot;></hero-form>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- inputs and output -->
<hr><h2 id=&quot;inputs-and-outputs&quot;>Inputs and Outputs</h2>

<img [src]=&quot;iconUrl&quot;/>
<button (click)=&quot;onSave()&quot;>Save</button>

<hero-detail [hero]=&quot;currentHero&quot; (deleteRequest)=&quot;deleteHero($event)&quot;>
</hero-detail>

<div (myClick)=&quot;clickMessage2=$event&quot; clickable>myClick2</div>
{{clickMessage2}}

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- Pipes -->
<hr><h2 id=&quot;pipes&quot;>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 => &quot;February 25, 1970&quot; -->
<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=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- Null values and the safe navigation operator -->
<hr><h2 id=&quot;safe-navigation-operator&quot;>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=&quot;nullHero&quot;>The null hero's name is {{nullHero.name}}</div>

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

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

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>

<!-- TODO: discuss this in the Style binding section -->
<!-- enums in bindings -->
<hr><h2 id=&quot;enums&quot;>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]=&quot;Color[color]&quot; (click)=&quot;colorToggle()&quot;>Enum Toggle</button>
</p>

<a class=&quot;to-toc&quot; href=&quot;#toc&quot;>top</a>


<!-- 
Copyright 2016 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
-->"><input type="hidden" name="files[app/hero-form.component.html]" value="<div id=heroForm>
  <form (ngSubmit)=&quot;onSubmit(heroForm)&quot; #heroForm=&quot;ngForm&quot;>
    <div class=&quot;form-group&quot;>
      <label for=&quot;name&quot;>Name
        <input class=&quot;form-control&quot; name=&quot;name&quot; required [(ngModel)]=&quot;hero.name&quot;>
      </label>
    </div>
    <button type=&quot;submit&quot; [disabled]=&quot;!heroForm.form.valid&quot;>Submit</button>
  </form>
  <div [hidden]=&quot;!heroForm.form.valid&quot;>
    {{submitMessage}}
  <div>
</div>



<!-- 
Copyright 2016 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
-->"><input type="hidden" name="files[index.html]" value="<!DOCTYPE html>
<html>
  <head>
    <title>Template Syntax</title>
    <script>document.write('<base href=&quot;' + document.location + '&quot; />');</script>
    <meta charset=&quot;UTF-8&quot;>
    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
    <link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>

    <!-- Polyfills -->
    <script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>

    <script src=&quot;https://unpkg.com/zone.js@0.7.4?main=browser&quot;></script>
    <script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>

    <script src=&quot;https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js&quot;></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>

</html>


<!-- 
Copyright 2016 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
-->"><input type="hidden" name="files[images/hero.base64.png]" value="[encoded data, 9752 characters]"><input type="hidden" name="files[images/ng-logo.base64.png]" value="[encoded data, 9640 characters]"><input type="hidden" name="files[images/villain.base64.png]" value="[encoded data, 14552 characters]"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="template"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Template Syntax Collection"></form><script>document.getElementById("mainForm").submit();</script></body></html>