Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: fix formating in class-binding (#57447)

Browse source 
fixes #57430

PR Close #57447
This commit is contained in:
Matthieu Riegler 2024-08-19 11:45:21 +02:00 committed by Alex Rickabaugh
parent 03ec620e31
commit fe9005ce8e
1 changed files with 13 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
adev/src/content/guide/templates/class-binding.md
View file

@ -31,12 +31,13 @@ If there are multiple bindings to the same class name, Angular uses styling prec
The following table summarizes class binding syntax.
| Binding Type | Syntax | Input Type | Example Input Values |
|:--- |:--- |:--- |:--- |
| Single class binding | `[class.sale]="onSale"` | <code>boolean | undefined | null</code> | `true`, `false` |
| Multi-class binding | `[class]="classExpression"` | `string` | `"my-class-1 my-class-2 my-class-3"` |
| Multi-class binding | `[class]="classExpression"` | <code>Record<string, boolean | undefined | null></code> | `{foo: true, bar: false}` |
| Multi-class binding | `[class]="classExpression"` | <code>Array<string></code> | `['foo', 'bar']` |
| Binding Type | Syntax | Input Type | Example Input Values |
| :------------------- | :-------------------------- | :---------------------- | :----------------------------------- |
| Single class binding | `[class.sale]="onSale"` | `boolean|undefined|null`| `true`, `false` |
| Multi-class binding | `[class]="classExpression"` | `string` | `"my-class-1 my-class-2 my-class-3"` |
| Multi-class binding | `[class]="classExpression"` | `Record<string, boolean|undefined|null>` | `{foo: true, bar: false}` |
| Multi-class binding | `[class]="classExpression"` | `Array<string>` | `['foo', 'bar']` |
## Binding to a single style
@ -74,12 +75,12 @@ If there are multiple bindings to the same style attribute, Angular uses styling
The following table summarizes style binding syntax.
| Binding Type | Syntax | Input Type | Example Input Values |
|:--- |:--- |:--- |:--- |
| Single style binding | `[style.width]="width"` | <code>string | undefined | null</code> | `"100px"` |
| Single style binding with units | `[style.width.px]="width"` | <code>number | undefined | null</code> | `100` |
| Multi-style binding | `[style]="styleExpression"` | `string` | `"width: 100px; height: 100px"` |
| Multi-style binding | `[style]="styleExpression"` | <code>Record<string, string | undefined | null></code> | `{width: '100px', height: '100px'}` |
| Binding Type | Syntax | Input Type | Example Input Values |
| :------------------------------ | :-------------------------- | :---------------------- | :------------------------------ |
| Single style binding | `[style.width]="width"` | `string| undefined|null`| `"100px"` |
| Single style binding with units | `[style.width.px]="width"` | `number| undefined|null`| `100` |
| Multi-style binding | `[style]="styleExpression"` | `string` | `"width: 100px; height: 100px"` |
| Multi-style binding | `[style]="styleExpression"` | `Record<string, string|undefined|null>` | `{width: '100px', height: '100px'}` |
## Styling precedence