+
ng generate directive highlight
-The CLI creates `src/app/highlight.directive.ts`, a corresponding test file `src/app/highlight.directive.spec.ts`, and _declares_ the directive class in the root `AppModule`.
+ The CLI creates `src/app/highlight.directive.ts`, a corresponding test file `src/app/highlight.directive.spec.ts`, and declares the directive class in the `AppModule`.
+
+ The CLI generates the default `src/app/highlight.directive.ts` as follows:
+
+
+
+ The `@Directive()` decorator's configuration property specifies the directive's CSS attribute selector, `[appHighlight]`.
+
+1. Import `ElementRef` from `@angular/core`.
+ `ElementRef` grants direct access to the host DOM element through its `nativeElement` property.
+
+1. Add `ElementRef` in the directive's `constructor()` to [inject](guide/dependency-injection) a reference to the host DOM element, the element to which you apply `appHighlight`.
+
+1. Add logic to the `HighlightDirective` class that sets the background to yellow.
+
+
-_Directives_ must be declared in [Angular Modules](guide/ngmodules) in the same manner as _components_.
+ Directives _do not_ support namespaces.
-
-
-The generated `src/app/highlight.directive.ts` is as follows:
-
-
-
-The imported `Directive` symbol provides Angular the `@Directive` decorator.
-
-The `@Directive` decorator's lone configuration property specifies the directive's
-[CSS attribute selector](https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors), `[appHighlight]`.
-
-It's the brackets (`[]`) that make it an attribute selector.
-Angular locates each element in the template that has an attribute named `appHighlight` and applies the logic of this directive to that element.
-
-The _attribute selector_ pattern explains the name of this kind of directive.
-
-
-
-#### Why not "highlight"?
-
-Though *highlight* would be a more concise selector than *appHighlight* and it would work,
-the best practice is to prefix selector names to ensure
-they don't conflict with standard HTML attributes.
-This also reduces the risk of colliding with third-party directive names.
-The CLI added the `app` prefix for you.
-
-Make sure you do **not** prefix the `highlight` directive name with **`ng`** because
-that prefix is reserved for Angular and using it could cause bugs that are difficult to diagnose.
+
-After the `@Directive` metadata comes the directive's controller class,
-called `HighlightDirective`, which contains the (currently empty) logic for the directive.
-Exporting `HighlightDirective` makes the directive accessible.
-
-Now edit the generated `src/app/highlight.directive.ts` to look as follows:
-
-
-
-The `import` statement specifies an additional `ElementRef` symbol from the Angular `core` library:
-
-You use the `ElementRef` in the directive's constructor
-to [inject](guide/dependency-injection) a reference to the host DOM element,
-the element to which you applied `appHighlight`.
-
-`ElementRef` grants direct access to the host DOM element
-through its `nativeElement` property.
-
-This first implementation sets the background color of the host element to yellow.
-
{@a apply-directive}
+## Applying an attribute directive
-## Apply the attribute directive
+1. To use the `HighlightDirective`, add a `` element to the HTML template with the directive as an attribute.
-To use the new `HighlightDirective`, add a paragraph (`
`) element to the template of the root `AppComponent` and apply the directive as an attribute.
+
-
-
-Now run the application to see the `HighlightDirective` in action.
-
-
-
-ng serve
-
-
-To summarize, Angular found the `appHighlight` attribute on the **host** `
` element.
-It created an instance of the `HighlightDirective` class and
-injected a reference to the `
` element into the directive's constructor
-which sets the `
` element's background style to yellow.
+Angular creates an instance of the `HighlightDirective` class and injects a reference to the `
` element into the directive's constructor, which sets the `
` element's background style to yellow.
{@a respond-to-user}
-## Respond to user-initiated events
+## Handling user events
-Currently, `appHighlight` simply sets an element color.
-The directive could be more dynamic.
-It could detect when the user mouses into or out of the element
-and respond by setting or clearing the highlight color.
+This section shows you how to detect when a user mouses into or out of the element and to respond by setting or clearing the highlight color.
-Begin by adding `HostListener` to the list of imported symbols.
+1. Import `HostListener` from '@angular/core'.
-
+
-Then add two event handlers that respond when the mouse enters or leaves,
-each adorned by the `HostListener` decorator.
+1. Add two event handlers that respond when the mouse enters or leaves, each with the `@HostListener()` decorator.
-
+
-The `@HostListener` decorator lets you subscribe to events of the DOM
-element that hosts an attribute directive, the `
` in this case.
+ With the `@HostListener()` decorator, you can subscribe to events of the DOM element that hosts an attribute directive, the `
` in this case.
-
+ The handlers delegate to a helper method, `highlight()`, that sets the color on the host DOM element, `el`.
-Of course you could reach into the DOM with standard JavaScript and attach event listeners manually.
-There are at least three problems with _that_ approach:
-
-1. You have to write the listeners correctly.
-1. The code must *detach* the listener when the directive is destroyed to avoid memory leaks.
-1. Talking to DOM API directly isn't a best practice.
-
-
-
-The handlers delegate to a helper method that sets the color on the host DOM element, `el`.
-
-The helper method, `highlight`, was extracted from the constructor.
-The revised constructor simply declares the injected `el: ElementRef`.
-
-
-
-Here's the updated directive in full:
+The complete directive is as follows:
-Run the app and confirm that the background color appears when
-the pointer hovers over the paragraph element and disappears as the pointer moves out.
+The background color appears when the pointer hovers over the paragraph element and disappears as the pointer moves out.
{@a bindings}
+## Passing values into an attribute directive
-## Pass values into the directive with an _@Input_ data binding
+This section walks you through setting the highlight color while applying the `HighlightDirective`.
-Currently the highlight color is hard-coded _within_ the directive. That's inflexible.
-In this section, you give the developer the power to set the highlight color while applying the directive.
+1. In `highlight.directive.ts`, import `Input` from `@angular/core`.
-Begin by adding `Input` to the list of symbols imported from `@angular/core`.
-
+
-Add a `highlightColor` property to the directive class like this:
+1. Add an `appHighlight` `@Input()` property.
-
+
-{@a input}
+ The `@Input()` decorator adds metadata to the class that makes the directive's `appHighlight` property available for binding.
-### Binding to an `@Input()` property
+1. In `app.component.ts`, add a `color` property to the `AppComponent`.
-Notice the `@Input()` decorator. It adds metadata to the class that makes the directive's `highlightColor` property available for binding.
+
-It's called an *input* property because data flows from the binding expression _into_ the directive.
-Without that `@Input()` metadata, Angular rejects the binding; see [below](guide/attribute-directives#why-input "Why add @Input?") for more information.
+1. To simultaneously apply the directive and the color, use property binding with the `appHighlight` directive selector, setting it equal to `color`.
-Try it by adding the following directive binding variations to the `AppComponent` template:
+
-
+ The `[appHighlight]` attribute binding performs two tasks:
-Add a `color` property to the `AppComponent`.
+ * applies the highlighting directive to the `` element
+ * sets the directive's highlight color with a property binding
-
+### Setting the value with user input
-Let it control the highlight color with a property binding.
+This section guides you through adding radio buttons to bind your color choice to the `appHighlight` directive.
-
+1. Add markup to `app.component.html` for choosing a color as follows:
-That's good, but it would be nice to _simultaneously_ apply the directive and set the color _in the same attribute_ like this.
+
-
+1. Revise the `AppComponent.color` so that it has no initial value.
-The `[appHighlight]` attribute binding both applies the highlighting directive to the `
` element
-and sets the directive's highlight color with a property binding.
-You're re-using the directive's attribute selector (`[appHighlight]`) to do both jobs.
-That's a crisp, compact syntax.
+
-You'll have to rename the directive's `highlightColor` property to `appHighlight` because that's now the color property binding name.
+1. Serve your application to verify that the user can choose the color with the radio buttons.
-
-
-This is disagreeable. The word, `appHighlight`, is a terrible property name and it doesn't convey the property's intent.
-
-{@a input-alias}
-
-### Bind to an _@Input_ alias
-
-Fortunately you can name the directive property whatever you want _and_ **_alias it_** for binding purposes.
-
-Restore the original property name and specify the selector as the alias in the argument to `@Input()`.
-
-
-
-_Inside_ the directive the property is known as `highlightColor`.
-_Outside_ the directive, where you bind to it, it's known as `appHighlight`.
-
-You get the best of both worlds: the property name you want and the binding syntax you want:
-
-
-
-Now that you're binding via the alias to the `highlightColor`, modify the `onMouseEnter()` method to use that property.
-If someone neglects to bind to `appHighlight`, highlight the host element in red:
-
-
-
-Here's the latest version of the directive class.
-
-
-
-## Write a harness to try it
-
-It may be difficult to imagine how this directive actually works.
-In this section, you'll turn `AppComponent` into a harness that
-lets you pick the highlight color with a radio button and bind your color choice to the directive.
-
-Update app.component.html as follows:
-
-
-
-Revise the `AppComponent.color` so that it has no initial value.
-
-
-
-Here are the harness and directive in action.
-
-
-
-
+
+
-
-
+
+
+
+
+
+**Don't** prefix a directive name with `ng` because that prefix is reserved for Angular and using it could cause bugs that are difficult to diagnose.
+
+