docs(docs-infra): improve the content of attribute directives

Improve docs "Understanding Angular-Directives-Attribute Directives"

In `highlight.directive.1.ts`, add the `private` keyword for `el` property
to make it correct and consistent with subsequent examples.

For section "Setting the value with user input", add a step to tell the
reader change the method `onMouseEnter`, thus more readable.

For section "Binding to a second property", add a step to tell the reader
should add an alias because the docs doesn't mention it at all, thus
more readable.

aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts

@@ -5,7 +5,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';
     }
 }

aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts

@@ -13,9 +13,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('');

aio/content/examples/attribute-directives/src/app/highlight.directive.ts

@@ -11,7 +11,9 @@ export class HighlightDirective {
   @Input() defaultColor = '';
   // #enddocregion defaultColor
 
+  // #docregion highlightColor
   @Input('appHighlight') highlightColor = '';
+  // #enddocregion highlightColor
 
   // #docregion mouse-enter
   @HostListener('mouseenter') onMouseEnter() {

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,6 +140,10 @@ 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 `@Input() appHighlight` to make `appHighlight` to be the alias.
+
+  <code-example path="attribute-directives/src/app/highlight.directive.ts" header="src/app/highlight.directive.ts (highlightColor)" region="highlightColor"></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`.
 
   <code-example path="attribute-directives/src/app/highlight.directive.ts" header="src/app/highlight.directive.ts (mouse-enter)" region="mouse-enter"></code-example>