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

aio/content/examples/styleguide/src/06-01/app/app.component.html

@@ -0,0 +1,2 @@
+<!-- #docregion -->
+<div tohHighlight>Bombasta</div>

aio/content/examples/styleguide/src/06-01/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/06-01/app/app.module.ts

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

aio/content/examples/styleguide/src/06-01/app/index.ts

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

aio/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts

@@ -0,0 +1,13 @@
+// #docregion
+import { Directive, HostListener } from '@angular/core';
+
+// #docregion example
+@Directive({
+  selector: '[tohHighlight]'
+})
+export class HighlightDirective {
+  @HostListener('mouseover') onMouseEnter() {
+    // do highlight work
+  }
+}
+// #enddocregion example

aio/content/examples/styleguide/src/06-01/app/shared/index.ts

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