From 8d560af0d9e7ba596812a7d8a2db13f1649a298a Mon Sep 17 00:00:00 2001 From: Kapunahele Wong Date: Mon, 20 Feb 2017 16:05:05 -0500 Subject: [PATCH 1/2] docs(attribute-directives): copy tweaks --- .../ts/latest/guide/attribute-directives.jade | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/public/docs/ts/latest/guide/attribute-directives.jade b/public/docs/ts/latest/guide/attribute-directives.jade index 7c19be8d57..60cf5c2d5c 100644 --- a/public/docs/ts/latest/guide/attribute-directives.jade +++ b/public/docs/ts/latest/guide/attribute-directives.jade @@ -25,12 +25,12 @@ a#directive-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). @@ -61,17 +61,17 @@ a#write-directive :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. + For a simple example, though, this demonstrates how attribute directives work. :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 +91,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 +120,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')] @@ -300,8 +300,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)') From 4a6247911caea03a90d6d12bd79d5bab0d080e24 Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Mon, 20 Feb 2017 16:23:23 -0800 Subject: [PATCH 2/2] docs(attribute-directives): ward's tweaks to tweaks --- .../ts/src/app/app.component.1.html | 2 ++ .../ts/latest/guide/attribute-directives.jade | 18 ++++-------------- 2 files changed, 6 insertions(+), 14 deletions(-) diff --git a/public/docs/_examples/attribute-directives/ts/src/app/app.component.1.html b/public/docs/_examples/attribute-directives/ts/src/app/app.component.1.html index a345271921..9f8c13f077 100644 --- a/public/docs/_examples/attribute-directives/ts/src/app/app.component.1.html +++ b/public/docs/_examples/attribute-directives/ts/src/app/app.component.1.html @@ -1,6 +1,8 @@

My First Attribute Directive

+

Highlight me!

+ diff --git a/public/docs/ts/latest/guide/attribute-directives.jade b/public/docs/ts/latest/guide/attribute-directives.jade index 60cf5c2d5c..a03dcbad99 100644 --- a/public/docs/ts/latest/guide/attribute-directives.jade +++ b/public/docs/ts/latest/guide/attribute-directives.jade @@ -49,21 +49,11 @@ 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 demonstrates 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 @@ -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 default 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')