From 72db3e8d54195693ebca33fb84e5b855cf40e642 Mon Sep 17 00:00:00 2001
From: Dan Levy <397632+justsml@users.noreply.github.com>
Date: Wed, 3 Feb 2021 23:56:53 -0700
Subject: [PATCH] docs: add camelCase example to style notation (#40699)

PR Close #40699
---
 ...single-and-multiple-style-binding.component.ts | 14 ++++++++++++++
 aio/content/guide/attribute-binding.md            | 15 +++++++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 aio/content/examples/attribute-binding/src/app/single-and-multiple-style-binding.component.ts

diff --git a/aio/content/examples/attribute-binding/src/app/single-and-multiple-style-binding.component.ts b/aio/content/examples/attribute-binding/src/app/single-and-multiple-style-binding.component.ts
new file mode 100644
index 0000000000..aabdbe710e
--- /dev/null
+++ b/aio/content/examples/attribute-binding/src/app/single-and-multiple-style-binding.component.ts
@@ -0,0 +1,14 @@
+@Component({
+  selector: 'app-nav-bar',
+  template: `
+<nav [style]='navStyle'>
+  <a [style.text-decoration]="activeLinkStyle">Home Page</a>
+  <a [style.text-decoration]="linkStyle">Login</a>
+</nav>`
+})
+export class NavBarComponent {
+  navStyle = 'font-size: 1.2rem; color: cornflowerblue;';
+  linkStyle = 'underline';
+  activeLinkStyle = 'overline';
+  /* . . . */
+}
diff --git a/aio/content/guide/attribute-binding.md b/aio/content/guide/attribute-binding.md
index 2ae2f3b0ea..d978ac99d8 100644
--- a/aio/content/guide/attribute-binding.md
+++ b/aio/content/guide/attribute-binding.md
@@ -174,6 +174,12 @@ Optionally, you can add a unit extension like `em` or `%`, which requires a numb
 You can write a style property name in either [dash-case](guide/glossary#dash-case), or
 [camelCase](guide/glossary#camelcase).
 
+<code-example language="html">
+  &lt;nav [style.background-color]="expression"&gt;&lt;/nav&gt;
+
+  &lt;nav [style.backgroundColor]="expression"&gt;&lt;/nav&gt;
+</code-example>
+
 </div>
 
 ### Binding to multiple styles
@@ -181,8 +187,8 @@ You can write a style property name in either [dash-case](guide/glossary#dash-ca
 To toggle multiple styles, bind to the `[style]` attribute&mdash;for example, `[style]="styleExpression"`.
 The `styleExpression` can be one of:
 
-* A string list of styles such as `"width: 100px; height: 100px;"`.
-* An object with style names as the keys and style values as the values, such as `{width: '100px', height: '100px'}`.
+* A string list of styles such as `"width: 100px; height: 100px; background-color: cornflowerblue;"`.
+* An object with style names as the keys and style values as the values, such as `{width: '100px', height: '100px', backgroundColor: 'cornflowerblue'}`.
 
 Note that binding an array to `[style]` is not supported.
 
@@ -193,6 +199,11 @@ Updating the property without changing object identity has no effect.
 
 </div>
 
+#### Single and multiple-style binding example
+
+<code-example path="attribute-binding/src/app/single-and-multiple-style-binding.component.ts" header="nav-bar.component.ts">
+</code-example>
+
 If there are multiple bindings to the same style attribute, Angular uses [styling precedence](guide/style-precedence) to determine which binding to use.
 
 The following table summarizes style binding syntax.