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: add style binding example to style guide

Browse source 
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.

(cherry picked from commit 7e5fca2608)
This commit is contained in:
Alessio Pelliccione 2025-11-19 18:09:35 +01:00 committed by Jessica Janiuk
parent 2a38387466
commit 404e90dd29
1 changed files with 3 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
adev/src/content/best-practices/style-guide.md
View file

@ -222,12 +222,15 @@ Prefer `class` and `style` bindings over using the [`NgClass`](/api/common/NgCla
```html
<!-- PREFER -->
<div [class.admin]="isAdmin" [class.dense]="density === 'high'">
<div [style.color]="textColor" [style.background-color]="backgroundColor">
<!-- OR -->
<div [class]="{admin: isAdmin, dense: density === 'high'}">
<div [style]="{'color': textColor, 'background-color': backgroundColor}">
<!-- AVOID -->
<div [ngClass]="{admin: isAdmin, dense: density === 'high'}">
<div [ngStyle]="{'color': textColor, 'background-color': backgroundColor}">
```
Both `class` and `style` bindings use a more straightforward syntax that aligns closely with