docs(aio): rename cb- files and a few others

aio/content/examples/styleguide/src/05-13/app/app.component.avoid.html

@@ -0,0 +1,5 @@
+<!-- #docregion -->
+<!-- avoid -->
+
+<toh-hero-button labelAttribute="OK" (changeEvent)="doSomething()">
+</toh-hero-button>

aio/content/examples/styleguide/src/05-13/app/app.component.html

@@ -0,0 +1,6 @@
+<!-- #docregion -->
+<toh-hero-button label="OK" (change)="doSomething()">
+</toh-hero-button>
+
+<!-- `heroHighlight` is both the directive name and the data-bound aliased property name -->
+<h3 heroHighlight="skyblue">The Great Bombasto</h3>

aio/content/examples/styleguide/src/05-13/app/app.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent { }

aio/content/examples/styleguide/src/05-13/app/app.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroButtonComponent, HeroHighlightDirective } from './heroes';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '05-13', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    HeroButtonComponent, HeroHighlightDirective
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}

aio/content/examples/styleguide/src/05-13/app/heroes/index.ts

@@ -0,0 +1 @@
+export * from './shared';

aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts

@@ -0,0 +1,14 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+// #docregion example
+/* avoid pointless aliasing */
+
+@Component({
+  selector: 'toh-hero-button',
+  template: `<button>{{label}}</button>`
+})
+export class HeroButtonComponent {
+  // Pointless aliases
+  @Output('changeEvent') change = new EventEmitter<any>();
+  @Input('labelAttribute') label: string;
+}
+// #enddocregion example

aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts

@@ -0,0 +1,14 @@
+// #docregion
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+// #docregion example
+@Component({
+  selector: 'toh-hero-button',
+  template: `<button>{{label}}</button>`
+})
+export class HeroButtonComponent {
+  // No aliases
+  @Output() change = new EventEmitter<any>();
+  @Input() label: string;
+}
+// #enddocregion example

aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/index.ts

@@ -0,0 +1 @@
+export * from './hero-button.component';

aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts

@@ -0,0 +1,15 @@
+// #docregion
+import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
+
+@Directive({ selector: '[heroHighlight]' })
+export class HeroHighlightDirective implements OnChanges {
+
+  // Aliased because `color` is a better property name than `heroHighlight`
+  @Input('heroHighlight') color: string;
+
+  constructor(private el: ElementRef) {}
+
+  ngOnChanges() {
+    this.el.nativeElement.style.backgroundColor = this.color || 'yellow';
+  }
+}

aio/content/examples/styleguide/src/05-13/app/heroes/shared/index.ts

@@ -0,0 +1,2 @@
+export * from './hero-button';
+export * from './hero-highlight.directive';

aio/content/examples/styleguide/src/05-13/app/index.ts

@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';