docs: Component Styles guide for CLI (#19791)

aio/content/examples/component-styles/e2e/app.e2e-spec.ts

@@ -13,7 +13,7 @@ describe('Component Style Tests', function () {
     let externalH1 = element(by.css('body > h1'));
 
     // Note: sometimes webdriver returns the fontWeight as "normal",
-    // othertimes as "400", both of which are equal in CSS terms.
+    // other times as "400", both of which are equal in CSS terms.
     expect(componentH1.getCssValue('fontWeight')).toMatch(/normal|400/);
     expect(externalH1.getCssValue('fontWeight')).not.toMatch(/normal|400/);
   });

aio/content/examples/component-styles/plnkr.json

@@ -4,7 +4,8 @@
   "files": [
     "!**/*.d.ts",
     "!**/*.js",
-    "!**/*.native.*"
+    "!**/*.native.*",
+    "!**/*.[1].*"
   ],
   "tags": ["CSS"]
 }

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

@@ -0,0 +1,3 @@
+h1 {
+  font-weight: normal;
+}

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

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 {