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

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", delete the aliase for the
`Input` property, and changes the name back to `appHighlight` in the code
to make it consistent with the whole tutorial.

PR Close #44628

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,11 +11,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
 

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>