<div class="parent">
  <h2>Spy Directive</h2>

  <label for="hero-name">Hero name: </label>
  <input type="text" id="hero-name" [(ngModel)]="newName" (keyup.enter)="addHero()">
  <button type="button" (click)="addHero()">Add Hero</button>
  <button type="button" (click)="reset()">Reset Heroes</button>

  <div class="info">
    <!-- #docregion template -->
    <p *ngFor="let hero of heroes" appSpy>
      {{hero}}
    </p>
    <!-- #enddocregion template -->

    <h3>Spy Lifecycle Hook Log</h3>
    <div *ngFor="let msg of logger.logs" class="log">{{msg}}</div>
  </div>
</div>
