docs(aio): update migrated content from anguar.io

aio/content/examples/displaying-data/src/app/app-ctor.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app-ctor',
+  template: `
+    <h1>{{title}} [Ctor version]</h1>
+    <h2>My favorite hero is: {{myHero}}</h2>
+    `
+})
+// #docregion class
+export class AppCtorComponent {
+  title: string;
+  myHero: string;
+
+  constructor() {
+    this.title = 'Tour of Heroes';
+    this.myHero = 'Windstorm';
+  }
+}

aio/content/examples/displaying-data/src/app/app.component.1.ts

@@ -0,0 +1,16 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  // #docregion template
+  template: `
+    <h1>{{title}}</h1>
+    <h2>My favorite hero is: {{myHero}}</h2>
+    `
+  // #enddocregion template
+})
+export class AppComponent {
+  title = 'Tour of Heroes';
+  myHero = 'Windstorm';
+}

aio/content/examples/displaying-data/src/app/app.component.2.ts

@@ -0,0 +1,26 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  // #docregion template
+  template: `
+    <h1>{{title}}</h1>
+    <h2>My favorite hero is: {{myHero}}</h2>
+    <p>Heroes:</p>
+    <ul>
+  // #docregion li
+      <li *ngFor="let hero of heroes">
+        {{ hero }}
+      </li>
+  // #enddocregion li
+    </ul>
+  `
+  // #enddocregion template
+})
+// #docregion class
+export class AppComponent {
+  title = 'Tour of Heroes';
+  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
+  myHero = this.heroes[0];
+}

aio/content/examples/displaying-data/src/app/app.component.3.ts

@@ -0,0 +1,35 @@
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion import
+import { Hero } from './hero';
+// #enddocregion import
+
+@Component({
+  selector: 'my-app',
+  // #docregion template
+  template: `
+    <h1>{{title}}</h1>
+    <h2>My favorite hero is: {{myHero.name}}</h2>
+    <p>Heroes:</p>
+    <ul>
+      <li *ngFor="let hero of heroes">
+        {{ hero.name }}
+      </li>
+    </ul>
+  `
+  // #enddocregion template
+})
+// #docregion class
+export class AppComponent {
+  title = 'Tour of Heroes';
+  // #docregion heroes
+  heroes = [
+    new Hero(1, 'Windstorm'),
+    new Hero(13, 'Bombasto'),
+    new Hero(15, 'Magneta'),
+    new Hero(20, 'Tornado')
+  ];
+  myHero = this.heroes[0];
+  // #enddocregion heroes
+}

aio/content/examples/displaying-data/src/app/app.component.ts

@@ -0,0 +1,32 @@
+// #docplaster
+// #docregion final
+import { Component } from '@angular/core';
+
+import { Hero } from './hero';
+
+@Component({
+  selector: 'my-app',
+  template: `
+  <h1>{{title}}</h1>
+  <h2>My favorite hero is: {{myHero.name}}</h2>
+  <p>Heroes:</p>
+  <ul>
+    <li *ngFor="let hero of heroes">
+      {{ hero.name }}
+      </li>
+  </ul>
+  // #docregion message
+  <p *ngIf="heroes.length > 3">There are many heroes!</p>
+  // #enddocregion message
+`
+})
+export class AppComponent {
+  title = 'Tour of Heroes';
+  heroes = [
+    new Hero(1, 'Windstorm'),
+    new Hero(13, 'Bombasto'),
+    new Hero(15, 'Magneta'),
+    new Hero(20, 'Tornado')
+  ];
+  myHero = this.heroes[0];
+}

aio/content/examples/displaying-data/src/app/app.module.ts

@@ -0,0 +1,16 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

aio/content/examples/displaying-data/src/app/hero.ts

@@ -0,0 +1,9 @@
+// #docregion
+export class Hero {
+  constructor(
+    // #docregion id
+    public id: number,
+    // #enddocregion id
+    public name: string) { }
+}
+// #enddocregion