docs: remove invalid style binding example (#40334)
Providing an array to `[style]` bindings is not supported and the behavior of the rendered style attribute is not as one might expect. This commit removes that array example from the table to discourage its use. Fixes #40147 PR Close #40334
This commit is contained in:
parent
34d2988d14
commit
3acbec8532
|
@ -91,8 +91,13 @@ See [styling delegation](guide/style-precedence#styling-delegation) for more inf
|
||||||
### Binding to multiple CSS classes
|
### Binding to multiple CSS classes
|
||||||
|
|
||||||
To bind to multiple classes, use `[class]` set to an expression—for example, `[class]="classExpression"`.
|
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.
|
The expression can be one of:
|
||||||
With an object format, Angular adds a class only if its associated value is truthy.
|
|
||||||
|
* 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.
|
||||||
|
|
||||||
<div class="alert is-important">
|
<div class="alert is-important">
|
||||||
|
|
||||||
|
@ -178,13 +183,16 @@ You can write a style property name in either [dash-case](guide/glossary#dash-ca
|
||||||
### Binding to multiple styles
|
### Binding to multiple styles
|
||||||
|
|
||||||
To toggle multiple styles, bind to the `[style]` attribute—for example, `[style]="styleExpression"`.
|
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.
|
||||||
|
|
||||||
<div class="alert is-important">
|
<div class="alert is-important">
|
||||||
|
|
||||||
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.
|
Updating the property without changing object identity has no effect.
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -234,8 +242,8 @@ The following table summarizes style binding syntax.
|
||||||
<td><code>100</code></td>
|
<td><code>100</code></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td rowspan=3>Multi-style binding</td>
|
<td rowspan=2>Multi-style binding</td>
|
||||||
<td rowspan=3><code>[style]="styleExpression"</code></td>
|
<td rowspan=2><code>[style]="styleExpression"</code></td>
|
||||||
<td><code>string</code></td>
|
<td><code>string</code></td>
|
||||||
<td><code>"width: 100px; height: 100px"</code></td>
|
<td><code>"width: 100px; height: 100px"</code></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -243,15 +251,14 @@ The following table summarizes style binding syntax.
|
||||||
<td><code>{[key: string]: string | undefined | null}</code></td>
|
<td><code>{[key: string]: string | undefined | null}</code></td>
|
||||||
<td><code>{width: '100px', height: '100px'}</code></td>
|
<td><code>{width: '100px', height: '100px'}</code></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
|
||||||
<td><code>Array</code><<code>string</code>></td>
|
|
||||||
<td><code>['width', '100px']</code></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
<div class="alert is-helpful">
|
||||||
|
|
||||||
The [NgStyle](guide/built-in-directives/#ngstyle) directive can be used as an alternative to direct `[style]` bindings.
|
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.
|
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.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<hr/>
|
<hr/>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue