diff --git a/aio/content/guide/attribute-binding.md b/aio/content/guide/attribute-binding.md index a60db920fd..d051319b5e 100644 --- a/aio/content/guide/attribute-binding.md +++ b/aio/content/guide/attribute-binding.md @@ -91,8 +91,13 @@ See [styling delegation](guide/style-precedence#styling-delegation) for more inf ### Binding to multiple CSS classes To bind to multiple classes, use `[class]` set to an expression—for example, `[class]="classExpression"`. -The expression can be a space-delimited string of class names, or an object with class names as the keys and truthy or falsy expressions as the values. -With an object format, Angular adds a class only if its associated value is truthy. +The expression can be one of: + +* A space-delimited string of class names. +* An object with class names as the keys and truthy or falsy expressions as the values. +* An array of class names. + +With the object format, Angular adds a class only if its associated value is truthy.
@@ -178,13 +183,16 @@ You can write a style property name in either [dash-case](guide/glossary#dash-ca ### Binding to multiple styles To toggle multiple styles, bind to the `[style]` attribute—for example, `[style]="styleExpression"`. -The expression is often a string list of styles such as `"width: 100px; height: 100px;"`. +The `styleExpression` can be one of: -You can also format the expression as 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;"`. +* An object with style names as the keys and style values as the values, such as `{width: '100px', height: '100px'}`. + +Note that binding an array to `[style]` is not supported.
-With any object-like expression—such as `object`, `Array`, `Map`, or `Set`—the identity of the object must change for Angular to update the class list. +When binding `[style]` to an object expression, the identity of the object must change for Angular to update the class list. Updating the property without changing object identity has no effect.
@@ -234,8 +242,8 @@ The following table summarizes style binding syntax. 100 - Multi-style binding - [style]="styleExpression" + Multi-style binding + [style]="styleExpression" string "width: 100px; height: 100px" @@ -243,15 +251,14 @@ The following table summarizes style binding syntax. {[key: string]: string | undefined | null} {width: '100px', height: '100px'} - - Array<string> - ['width', '100px'] - +
+ The [NgStyle](guide/built-in-directives/#ngstyle) directive can be used as an alternative to direct `[style]` bindings. However, using the above style binding syntax without `NgStyle` is preferred because due to improvements in style binding in Angular, `NgStyle` no longer provides significant value, and might eventually be removed in the future. +

@@ -334,8 +341,8 @@ The [Attribute](api/core/Attribute) parameter decorator is great for passing the
-