diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts
index 1ce9949ec0d..77d1998737b 100644
--- a/aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts
@@ -6,7 +6,7 @@ import { Directive, ElementRef } from '@angular/core';
   selector: '[appHighlight]'
 })
 export class HighlightDirective {
-    constructor(el: ElementRef) {
-       el.nativeElement.style.backgroundColor = 'yellow';
+    constructor(private el: ElementRef) {
+       this.el.nativeElement.style.backgroundColor = 'yellow';
     }
 }
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts
index 00380664fe5..17d64b91387 100644
--- a/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts
@@ -14,9 +14,11 @@ export class HighlightDirective {
   @Input() appHighlight = '';
   // #enddocregion input
 
+  // #docregion mouse-enter
   @HostListener('mouseenter') onMouseEnter() {
     this.highlight(this.appHighlight || 'red');
   }
+  // #enddocregion mouse-enter
 
   @HostListener('mouseleave') onMouseLeave() {
     this.highlight('');
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.ts
index 76bbfd1771a..2a37b5bbfdc 100644
--- a/aio/content/examples/attribute-directives/src/app/highlight.directive.ts
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.ts
@@ -12,11 +12,11 @@ export class HighlightDirective {
   @Input() defaultColor = '';
   // #enddocregion defaultColor
 
-  @Input('appHighlight') highlightColor = '';
+  @Input() appHighlight = '';
 
   // #docregion mouse-enter
   @HostListener('mouseenter') onMouseEnter() {
-    this.highlight(this.highlightColor || this.defaultColor || 'red');
+    this.highlight(this.appHighlight || this.defaultColor || 'red');
   }
   // #enddocregion mouse-enter
 
diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md
index a126e5e72ce..e3b94ad2e8a 100644
--- a/aio/content/guide/attribute-directives.md
+++ b/aio/content/guide/attribute-directives.md
@@ -120,6 +120,10 @@ This section guides you through adding radio buttons to bind your color choice t
 
   <code-example path="attribute-directives/src/app/app.component.ts" header="src/app/app.component.ts (class)" region="class"></code-example>
 
+1. In `highlight.directive.ts`, revise `onMouseEnter` method so that it first tries to highlight with `appHighlight` and falls back to `red` if `appHighlight` is `undefined`.
+
+  <code-example path="attribute-directives/src/app/highlight.directive.3.ts" header="src/app/highlight.directive.ts (mouse-enter)" region="mouse-enter"></code-example>
+
 1. Serve your application to verify that the user can choose the color with the radio buttons.
 
   <div class="lightbox">
@@ -136,7 +140,7 @@ This section guides you through configuring your application so the developer ca
 
   <code-example path="attribute-directives/src/app/highlight.directive.ts" header="src/app/highlight.directive.ts (defaultColor)" region="defaultColor"></code-example>
 
-1. Revise the directive's `onMouseEnter` so that it first tries to highlight with the `highlightColor`, then with the `defaultColor`, and falls back to `red` if both properties are `undefined`.
+1. Revise the directive's `onMouseEnter` so that it first tries to highlight with the `appHighlight`, then with the `defaultColor`, and falls back to `red` if both properties are `undefined`.
 
   <code-example path="attribute-directives/src/app/highlight.directive.ts" header="src/app/highlight.directive.ts (mouse-enter)" region="mouse-enter"></code-example>