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.