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

aio/content/examples/component-styles/src/app/app.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { HeroAppComponent } from './hero-app.component';
+import { HeroAppMainComponent } from './hero-app-main.component';
+import { HeroDetailsComponent } from './hero-details.component';
+import { HeroControlsComponent } from './hero-controls.component';
+import { QuestSummaryComponent } from './quest-summary.component';
+import { HeroTeamComponent } from './hero-team.component';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    HeroAppComponent,
+    HeroAppMainComponent,
+    HeroDetailsComponent,
+    HeroControlsComponent,
+    QuestSummaryComponent,
+    HeroTeamComponent
+  ],
+  bootstrap: [ HeroAppComponent ]
+})
+export class AppModule { }

aio/content/examples/component-styles/src/app/hero-app-main.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+
+import { Hero } from './hero';
+
+@Component({
+  selector: 'hero-app-main',
+  template: `
+    <quest-summary></quest-summary>
+    <hero-details [hero]=hero [class.active]=hero.active>
+      <hero-controls [hero]=hero></hero-controls>
+    </hero-details>
+  `
+})
+export class HeroAppMainComponent {
+  @Input() hero: Hero;
+}

aio/content/examples/component-styles/src/app/hero-app.component.ts

@@ -0,0 +1,24 @@
+import { Component, HostBinding } from '@angular/core';
+import { Hero } from './hero';
+
+// #docregion
+@Component({
+  selector: 'hero-app',
+  template: `
+    <h1>Tour of Heroes</h1>
+    <hero-app-main [hero]=hero></hero-app-main>`,
+  styles: ['h1 { font-weight: normal; }']
+})
+export class HeroAppComponent {
+// #enddocregion
+  hero = new Hero(
+    'Human Torch',
+    ['Mister Fantastic', 'Invisible Woman', 'Thing']
+  );
+
+  @HostBinding('class') get themeClass() {
+    return 'theme-light';
+  }
+// #docregion
+}
+// #enddocregion

aio/content/examples/component-styles/src/app/hero-controls.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { Hero } from './hero';
+
+// #docregion inlinestyles
+@Component({
+  selector: 'hero-controls',
+  template: `
+    <style>
+      button {
+        background-color: white;
+        border: 1px solid #777;
+      }
+    </style>
+    <h3>Controls</h3>
+    <button (click)="activate()">Activate</button>
+  `
+})
+// #enddocregion inlinestyles
+export class HeroControlsComponent {
+  @Input() hero: Hero;
+
+  activate() {
+    this.hero.active = true;
+  }
+}

aio/content/examples/component-styles/src/app/hero-details-box.css

@@ -0,0 +1,3 @@
+:host {
+  padding: 10px;
+}

aio/content/examples/component-styles/src/app/hero-details.component.css

@@ -0,0 +1,28 @@
+/* #docregion import */
+@import 'hero-details-box.css';
+/* #enddocregion import */
+
+/* #docregion host */
+:host {
+  display: block;
+  border: 1px solid black;
+}
+/* #enddocregion host */
+
+/* #docregion hostfunction */
+:host(.active) {
+  border-width: 3px;
+}
+/* #enddocregion hostfunction */
+
+/* #docregion hostcontext */
+:host-context(.theme-light) h2 {
+  background-color: #eef;
+}
+/* #enddocregion hostcontext */
+
+/* #docregion deep */
+:host /deep/ h3 {
+  font-style: italic;
+}
+/* #enddocregion deep */

aio/content/examples/component-styles/src/app/hero-details.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { Hero } from './hero';
+
+// #docregion styleurls
+@Component({
+  selector: 'hero-details',
+  template: `
+    <h2>{{hero.name}}</h2>
+    <hero-team [hero]=hero></hero-team>
+    <ng-content></ng-content>
+  `,
+  styleUrls: ['app/hero-details.component.css']
+})
+export class HeroDetailsComponent {
+  // #enddocregion styleurls
+  @Input() hero: Hero;
+  // #docregion styleurls
+}

aio/content/examples/component-styles/src/app/hero-team.component.css

@@ -0,0 +1,3 @@
+li {
+  list-style-type: square;
+}

aio/content/examples/component-styles/src/app/hero-team.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { Hero } from './hero';
+
+// #docregion stylelink
+@Component({
+  selector: 'hero-team',
+  template: `
+    <link rel="stylesheet" href="app/hero-team.component.css">
+    <h3>Team</h3>
+    <ul>
+      <li *ngFor="let member of hero.team">
+        {{member}}
+      </li>
+    </ul>`
+})
+// #enddocregion stylelink
+export class HeroTeamComponent {
+  @Input() hero: Hero;
+}

aio/content/examples/component-styles/src/app/hero.ts

@@ -0,0 +1,7 @@
+export class Hero {
+  active: boolean;
+
+  constructor(public name: string,
+              public team: string[]) {
+  }
+}

aio/content/examples/component-styles/src/app/quest-summary.component.css

@@ -0,0 +1,5 @@
+:host {
+  display: block;
+  background-color: green;
+  color: white;
+}

aio/content/examples/component-styles/src/app/quest-summary.component.html

@@ -0,0 +1 @@
+<p>No quests in progress</p>

aio/content/examples/component-styles/src/app/quest-summary.component.ts

@@ -0,0 +1,20 @@
+/* tslint:disable:no-unused-variable */
+// #docplaster
+import { Component, ViewEncapsulation } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'quest-summary',
+  // #docregion urls
+  templateUrl: './quest-summary.component.html',
+  styleUrls:  ['./quest-summary.component.css']
+  // #enddocregion urls
+})
+export class QuestSummaryComponent { }
+// #enddocregion
+/*
+  // #docregion encapsulation.native
+  // warning: few browsers support shadow DOM encapsulation at this time
+  encapsulation: ViewEncapsulation.Native
+  // #enddocregion encapsulation.native
+*/