From 1c0218bc793200a9e3f0306ea4cea2b7988f7b63 Mon Sep 17 00:00:00 2001
From: Patrice Chalin <chalin@users.noreply.github.com>
Date: Fri, 6 May 2016 10:18:48 -0700
Subject: [PATCH] docs(dev guide): attribute-directives - move html excerpt to
 .html file (#1313)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Jade can’t parse inlined Angular adorned HTML properly, so it is best
to put such source in a file and include with `makeExample`.
---
 .../attribute-directives/dart/lib/app_component_1.html        | 4 ++++
 .../attribute-directives/ts/app/app.component.1.html          | 3 +++
 public/docs/ts/latest/guide/attribute-directives.jade         | 4 ++--
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/public/docs/_examples/attribute-directives/dart/lib/app_component_1.html b/public/docs/_examples/attribute-directives/dart/lib/app_component_1.html
index ef66580027..e5ee1c6463 100644
--- a/public/docs/_examples/attribute-directives/dart/lib/app_component_1.html
+++ b/public/docs/_examples/attribute-directives/dart/lib/app_component_1.html
@@ -1,3 +1,7 @@
 <!-- #docregion -->
 <h1>My First Attribute Directive</h1>
 <p myHighlight>Highlight me!</p>
+<!-- #enddocregion -->
+<!-- #docregion p-style-background -->
+<p [style.background]="'lime'">I am green with envy!</p>
+<!-- #enddocregion p-style-background -->
diff --git a/public/docs/_examples/attribute-directives/ts/app/app.component.1.html b/public/docs/_examples/attribute-directives/ts/app/app.component.1.html
index 7843d3cdf2..e5ee1c6463 100644
--- a/public/docs/_examples/attribute-directives/ts/app/app.component.1.html
+++ b/public/docs/_examples/attribute-directives/ts/app/app.component.1.html
@@ -2,3 +2,6 @@
 <h1>My First Attribute Directive</h1>
 <p myHighlight>Highlight me!</p>
 <!-- #enddocregion -->
+<!-- #docregion p-style-background -->
+<p [style.background]="'lime'">I am green with envy!</p>
+<!-- #enddocregion p-style-background -->
diff --git a/public/docs/ts/latest/guide/attribute-directives.jade b/public/docs/ts/latest/guide/attribute-directives.jade
index 7b43bbe9e8..b175139fd0 100644
--- a/public/docs/ts/latest/guide/attribute-directives.jade
+++ b/public/docs/ts/latest/guide/attribute-directives.jade
@@ -36,8 +36,8 @@ p.
   :marked
     We don't need *any* directive to simply set the background color.
     We can set it with the special [Style Binding](template-syntax.html#style-binding) like this:
-  code-example(language="html" escapse="html").
-    <p [style.background]="'lime'">I am green with envy!</p>
+
+  +makeExample('attribute-directives/ts/app/app.component.1.html','p-style-background')
 
   :marked
     That wouldn't be nearly as much fun as creating our own directive.