feat(aio): copy example code from angular.io

aio/content/examples/toh-2/ts-snippets/app.component.snippets.pt2.ts

@@ -0,0 +1,69 @@
+// #docregion ng-for
+<li *ngFor="let hero of heroes">
+  <span class="badge">{{hero.id}}</span> {{hero.name}}
+</li>
+// #enddocregion ng-for
+
+// #docregion heroes-styled
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li *ngFor="let hero of heroes">
+    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  </li>
+</ul>
+// #enddocregion heroes-styled
+
+// #docregion selectedHero-click
+<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
+  <span class="badge">{{hero.id}}</span> {{hero.name}}
+</li>
+// #enddocregion selectedHero-click
+
+// #docregion selectedHero-details
+<h2>{{selectedHero.name}} details!</h2>
+<div><label>id: </label>{{selectedHero.id}}</div>
+<div>
+    <label>name: </label>
+    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
+</div>
+// #enddocregion selectedHero-details
+
+// #docregion ng-if
+<div *ngIf="selectedHero">
+  <h2>{{selectedHero.name}} details!</h2>
+  <div><label>id: </label>{{selectedHero.id}}</div>
+  <div>
+    <label>name: </label>
+    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
+  </div>
+</div>
+// #enddocregion ng-if
+
+// #docregion hero-array-1
+heroes = HEROES;
+// #enddocregion hero-array-1
+
+// #docregion heroes-template-1
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li>
+    <!-- each hero goes here -->
+  </li>
+</ul>
+// #enddocregion heroes-template-1
+
+// #docregion heroes-ngfor-1
+<li *ngFor="let hero of heroes">
+// #enddocregion heroes-ngfor-1
+
+// #docregion class-selected-1
+[class.selected]="hero === selectedHero"
+// #enddocregion class-selected-1
+
+// #docregion class-selected-2
+<li *ngFor="let hero of heroes"
+  [class.selected]="hero === selectedHero"
+  (click)="onSelect(hero)">
+  <span class="badge">{{hero.id}}</span> {{hero.name}}
+</li>
+// #enddocregion class-selected-2