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

aio/content/examples/styleguide/src/02-08/app/app.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  template: '<input type="text" tohValidate>'
+})
+export class AppComponent { }

aio/content/examples/styleguide/src/02-08/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { InputHighlightDirective,
+         ValidateDirective } from './shared';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '02-08', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    InputHighlightDirective,
+    ValidateDirective
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}

aio/content/examples/styleguide/src/02-08/app/index.ts

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

aio/content/examples/styleguide/src/02-08/app/shared/index.ts

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

aio/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts

@@ -0,0 +1,10 @@
+// #docregion
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({ selector: 'input'})
+/** Highlight the attached input text element in blue */
+export class InputHighlightDirective {
+  constructor(el: ElementRef) {
+    el.nativeElement.style.backgroundColor = 'powderblue';
+  }
+}

aio/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts

@@ -0,0 +1,10 @@
+// #docregion
+import { Directive } from '@angular/core';
+// #docregion example
+/* avoid */
+
+@Directive({
+  selector: '[validate]'
+})
+export class ValidateDirective {}
+// #enddocregion example

aio/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts

@@ -0,0 +1,9 @@
+// #docregion
+import { Directive } from '@angular/core';
+
+// #docregion example
+@Directive({
+  selector: '[tohValidate]'
+})
+export class ValidateDirective {}
+// #enddocregion example