more_horiz
@angular/commoncode
NgStyle
directive
stable
An attribute directive that updates styles for the containing HTML element.
Sets one or more style properties, specified as colon-separated key-value pairs.
The key is a style name, with an optional .<unit> suffix
(such as 'top.px', 'font-style.em').
The value is an expression to be evaluated.
The resulting non-null value, expressed in the given unit,
is assigned to the given style property.
If the result of evaluation is null, the corresponding style is removed.
On this page
API
class NgStyle implements DoCheck { constructor(_ngEl: ElementRef<any>, _differs: KeyValueDiffers, _renderer: Renderer2): NgStyle; @Input() set ngStyle(value: { [klass: string]: any; } | null | undefined);}
ngStyle
{ [klass: string]: any; } | null | undefinedDescription
An attribute directive that updates styles for the containing HTML element.
Sets one or more style properties, specified as colon-separated key-value pairs.
The key is a style name, with an optional .<unit> suffix
(such as 'top.px', 'font-style.em').
The value is an expression to be evaluated.
The resulting non-null value, expressed in the given unit,
is assigned to the given style property.
If the result of evaluation is null, the corresponding style is removed.
Exported by
Usage Notes
Set the width of the containing element to a pixel value returned by an expression.
<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>Set a collection of style values using an expression that returns key-value pairs.
<some-element [ngStyle]="objExp">...</some-element>For more simple use cases you can use the style bindings directly. It doesn't require importing a directive.
Set the font of the containing element to the result of an expression.
<some-element [style]="{'font-style': styleExp}">...</some-element>Jump to details