Inline Styles

Styles passed directly to an element through the style prop as a JavaScript object.

Notes

The style prop takes an object, hence the double braces: the outer pair enters JavaScript, the inner pair is the object.
Property names are camelCase (backgroundColor, not background-color).
Numbers become pixels for most properties (padding: 8 → 8px).
Inline styles can't use pseudo-classes (:hover), pseudo-elements, or media queries, and they have the highest specificity, so they're hard to override.

What / Why / When

What: Per-element styles as a JS object.
Why: Quick, and easy to drive from runtime values.
When: Truly dynamic values (a computed width, a user-chosen color, a drag position). Avoid for general styling.
Use case: A progress bar whose width comes from state.

Code compare

React

export function ProgressBar({ percent }: { percent: number }) {  return (    <div className="progress">      <div style={{ width: `${percent}%`, backgroundColor: "#f59e0b" }} />    </div>  );}// Conditional inline style<input type="email" style={{ backgroundColor: emailNotValid ? "#fed2d2" : "#d1d5db" }} />;

Angular

<!-- Single property --><div [style.width.%]="percent()"></div><input type="email" [style.background-color]="emailNotValid() ? '#fed2d2' : '#d1d5db'" /><!-- Multiple properties as an object --><div [style]="{ width: percent() + '%', 'background-color': '#f59e0b' }"></div>

Differences and gotchas

Angular supports unit suffixes in the binding: [style.width.px]="w", [style.width.%]="p".
Your notes mention [ngStyle]. It still works, but the Angular docs now recommend native [style] bindings, which need no import.

Quick reference

React	Angular
`style={{ width: '50%' }}`	`[style.width.%]="50"`
`style={{ backgroundColor: c }}`	`[style.background-color]="c"`
`style={obj}`	`[style]="obj"` (or `[ngStyle]`)