`Style Binding`

Sets inline styles on an element from template expressions.

Since Angular 2+ Spec ↗

Syntax

[style.prop]="value" | [style.prop.unit]="n" | [style]="map"

Parameters

Name	Type	Required	Description
`value`	`string \| number`	No	The CSS value applied to the property.

Returns

template binding — Updates inline styles reactively.

Examples

@Component({
  selector: 'app-x',
  standalone: true,
  template: `
    <div [style.color]="color"
         [style.width.px]="width"
         [style]="{ opacity: isFaded ? 0.5 : 1 }">
    </div>
  `,
})
export class XComponent {
  color = 'red';
  width = 200;
  isFaded = true;
}

Notes

`[style.prop]` sets one property; append a unit like `.px` or `.%` to bind a number with units. `[style]` accepts a string or object map and merges with the static style attribute. The legacy `ngStyle` directive is equivalent.