Highlight me!
+ diff --git a/public/docs/ts/latest/guide/attribute-directives.jade b/public/docs/ts/latest/guide/attribute-directives.jade index 94b27598eb..469b2eb7f7 100644 --- a/public/docs/ts/latest/guide/attribute-directives.jade +++ b/public/docs/ts/latest/guide/attribute-directives.jade @@ -24,13 +24,13 @@ a#directive-overview ## Directives overview There are three kinds of directives in Angular: - - 1. Components — directives with a template. - 1. Structural directives — change the DOM layout by adding and removing DOM elements. - 1. Attribute directives — change the appearance or behavior of an element, component, or another directive. + + 1. Components—directives with a template. + 1. Structural directives—change the DOM layout by adding and removing DOM elements. + 1. Attribute directives—change the appearance or behavior of an element, component, or another directive. *Components* are the most common of the three directives. - You saw a component for the first time in the [QuickStart](../quickstart.html) example. + You saw a component for the first time in the [QuickStart](../quickstart.html) guide. *Structural Directives* change the structure of the view. Two examples are [NgFor](template-syntax.html#ngFor) and [NgIf](template-syntax.html#ngIf). @@ -49,29 +49,19 @@ a#write-directive the attribute. The controller class implements the desired directive behavior. - This page demonstrates building a simple attribute + This page demonstrates building a simple _myHighlight_ attribute directive to set an element's background color - when the user hovers over that element. -.l-sub-section - :marked - Technically, a directive isn't necessary to simply set the background color. Style binding can set styles as follows: - - +makeExample('attribute-directives/ts/src/app/app.component.1.html','p-style-background') - - :marked - Read more about [style binding](template-syntax.html#style-binding) on the [Template Syntax](template-syntax.html) page. - - For a simple example, though, this will demonstrate how attribute directives work. - + when the user hovers over that element. You can apply it like this: ++makeExample('attribute-directives/ts/src/app/app.component.1.html','applied') :marked ### Write the directive code - Follow the [setup](setup.html) instructions for creating a new project + Follow the [setup](setup.html) instructions for creating a new local project named attribute-directives. :marked - Create the following source file in the indicated folder with the following code: + Create the following source file in `src/app` with the following code: +makeExample('src/app/highlight.directive.1.ts') block highlight-directive-1 @@ -91,14 +81,14 @@ block highlight-directive-1 The [CSS selector for an attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) is the attribute name in square brackets. Here, the directive's selector is `[myHighlight]`. - Angular will locate all elements in the template that have an attribute named `myHighlight`. + Angular locates all elements in the template that have an attribute named `myHighlight`. .l-sub-section :marked ### Why not call it "highlight"? Though *highlight* is a more concise name than *myHighlight* and would work, a best practice is to prefix selector names to ensure they don't conflict with standard HTML attributes. - This also reduces the risk colliding with third-party directive names. + This also reduces the risk of colliding with third-party directive names. 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. For a simple demo, the short prefix, `my`, helps distinguish your custom directive. @@ -120,7 +110,7 @@ a#apply-directive ## Apply the attribute directive To use the new `HighlightDirective`, create a template that applies the directive as an attribute to a paragraph (``) element. - In Angular terms, the `
` element will be the attribute **host**. + In Angular terms, the `
` element is the attribute **host**. p | Put the template in its own code #[+adjExPath('app.component.html')] @@ -210,7 +200,7 @@ a#bindings ## Pass values into the directive with an _@Input_ data binding Currently the highlight color is hard-coded _within_ the directive. That's inflexible. - Let the user of the directive set the color in the template with a binding. + In this section, you give the developer the power to set the highlight color while applying the directive. Start by adding a `highlightColor` property to the directive class like this: +makeExample('attribute-directives/ts/src/app/highlight.directive.2.ts','color', 'src/app/highlight.directive.ts') @@ -300,8 +290,9 @@ a#second-property ## Bind to a second property This highlight directive has a single customizable property. In a real app, it may need more. - At the moment, the default color — the color that prevails until the user picks a highlight color — - is hard-coded as "red". Let the template developer set the default color. + At the moment, the default color—the color that prevails until + the user picks a highlight color—is hard-coded as "red". + Let the template developer set the default color. Add a second **input** property to `HighlightDirective` called `defaultColor`: +makeExcerpt('attribute-directives/ts/src/app/highlight.directive.ts', 'defaultColor','src/app/highlight.directive.ts (defaultColor)')