docs: Component Styles guide for CLI

angular · Oct 18, 2017 · 67f7edd · 67f7edd
1 parent 81173b0
commit 67f7edd
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 135 deletions.
diff --git a/aio/content/examples/component-styles/plnkr.json b/aio/content/examples/component-styles/plnkr.json
@@ -4,7 +4,8 @@
   "files": [
     "!**/*.d.ts",
     "!**/*.js",
-    "!**/*.native.*"
+    "!**/*.native.*",
+    "!**/*.[1].*"
   ],
   "tags": ["CSS"]
 }
diff --git a/aio/content/examples/component-styles/src/app/hero-app.component.1.css b/aio/content/examples/component-styles/src/app/hero-app.component.1.css
@@ -0,0 +1,3 @@
+h1 { 
+  font-weight: normal; 
+}
diff --git a/aio/content/examples/component-styles/src/app/hero-app.component.1.ts b/aio/content/examples/component-styles/src/app/hero-app.component.1.ts
@@ -0,0 +1,25 @@
+import { Component, HostBinding } from '@angular/core';
+import { Hero } from './hero';
+
+// #docregion
+@Component({
+  selector: 'app-root',
+  template: `
+    <h1>Tour of Heroes</h1>
+    <app-hero-main [hero]="hero"></app-hero-main>
+  `,
+  styleUrls: ['./hero-app.component.css']
+})
+export class HeroAppComponent {
+// #enddocregion
+  hero = new Hero(
+    'Human Torch',
+    ['Mister Fantastic', 'Invisible Woman', 'Thing']
+  );
+
+  @HostBinding('class') get themeClass() {
+    return 'theme-light';
+  }
+// #docregion
+}
+// #enddocregion
diff --git a/aio/content/examples/component-styles/src/app/hero-app.component.ts b/aio/content/examples/component-styles/src/app/hero-app.component.ts
@@ -6,7 +6,8 @@ import { Hero } from './hero';
   selector: 'app-root',
   template: `
     <h1>Tour of Heroes</h1>
-    <app-hero-main [hero]=hero></app-hero-main>`,
+    <app-hero-main [hero]="hero"></app-hero-main>
+  `,
   styles: ['h1 { font-weight: normal; }']
 })
 export class HeroAppComponent {