Skip to content

Commit 7e5fca2

Browse files
alessiopelliccionethePunderWoman
authored andcommitted
docs: add style binding example to style guide
Adds a parallel example for style bindings alongside the existing class binding example, demonstrating the preferred syntax of [style.property] and [style] over [ngStyle] directive.
1 parent 2013261 commit 7e5fca2

File tree

1 file changed

+3
-0
lines changed

1 file changed

+3
-0
lines changed

adev/src/content/best-practices/style-guide.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -222,12 +222,15 @@ Prefer `class` and `style` bindings over using the [`NgClass`](/api/common/NgCla
222222
```html
223223
<!-- PREFER -->
224224
<div [class.admin]="isAdmin" [class.dense]="density === 'high'">
225+
<div [style.color]="textColor" [style.background-color]="backgroundColor">
225226
<!-- OR -->
226227
<div [class]="{admin: isAdmin, dense: density === 'high'}">
228+
<div [style]="{'color': textColor, 'background-color': backgroundColor}">
227229

228230

229231
<!-- AVOID -->
230232
<div [ngClass]="{admin: isAdmin, dense: density === 'high'}">
233+
<div [ngStyle]="{'color': textColor, 'background-color': backgroundColor}">
231234
```
232235

233236
Both `class` and `style` bindings use a more straightforward syntax that aligns closely with

0 commit comments

Comments
 (0)