From 4e9d62ff81a19322e424a5e4035375123ad51d07 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Wed, 29 Jan 2020 17:46:08 -0800
Subject: [PATCH] docs(ivy): update style binding docs to v9 behavior (#35066)

PR Close #35066
---
 .../src/app/app.component.html                |  6 +++++
 aio/content/guide/template-syntax.md          | 26 ++++++++++++++++---
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/aio/content/examples/attribute-binding/src/app/app.component.html b/aio/content/examples/attribute-binding/src/app/app.component.html
index a314891788..20f7ca2add 100644
--- a/aio/content/examples/attribute-binding/src/app/app.component.html
+++ b/aio/content/examples/attribute-binding/src/app/app.component.html
@@ -61,3 +61,9 @@
 <button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
 <button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
 <!-- #enddocregion style-binding-condition-->
+
+<!-- #docregion direct-style-binding -->
+<h3>Bind to multiple styles</h3>
+
+<div style="color: blue" [style]="styleExpr">Add multiple styles</div>
+<!-- #enddocregion direct-style-binding -->
diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
index 496d7a460c..40d2652fcf 100644
--- a/aio/content/guide/template-syntax.md
+++ b/aio/content/guide/template-syntax.md
@@ -935,7 +935,14 @@ Updating the property without changing object identity will have no effect.
 
 ### Style binding
 
-You can set inline styles with a **style binding**.
+Here's how to set the style attribute without a binding in plain HTML:
+
+```html
+<!-- standard style attribute setting -->
+<div style="color: blue">Item clearance special</div>
+```
+
+You can set styles dynamically with a **style binding**.
 
 Style binding syntax resembles property binding.
 Instead of an element property between brackets, start with the prefix `style`,
@@ -948,9 +955,6 @@ The following example conditionally sets the font size in  “em” and “%”
 
 <code-example path="attribute-binding/src/app/app.component.html" region="style-binding-condition" header="src/app/app.component.html"></code-example>
 
-This technique is suitable for setting a single style, but consider
-the [`NgStyle`](guide/template-syntax#ngStyle) directive when setting several inline styles at the same time.
-
 <div class="alert is-helpful">
 
 Note that a _style property_ name can be written in either
@@ -959,6 +963,20 @@ Note that a _style property_ name can be written in either
 
 </div>
 
+If there are multiple styles you'd like to toggle, you can bind to the `[style]` property directly.
+Binding to `[style]` is additive, so it shouldn't overwrite other style bindings or static styles unless the same style property is duplicated.
+
+<code-example path="attribute-binding/src/app/app.component.html" region="direct-style-binding" header="src/app/app.component.html"></code-example>
+
+The expression attached to the `[style]` binding is most often a string list of styles like `"width: 100px; height: 100px;"`. 
+
+You can also format the expression as an object with style names as the keys and style values as the values, like `{width: '100px', height: '100px'}`. 
+It's important to note that with object format, the identity of the object must change for the styles to be updated.
+Updating the property without changing object identity will have no effect.
+
+*This is true for Angular version 9 and later. For Angular version 8, see <a href="http://v8.angular.io/guide/template-syntax#style-binding">v8.angular.io</a>
+
+
 <hr/>
 
 {@a event-binding}