Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

NgStyle

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 from

Selectors

Properties

Property Description
@Input()
ngStyle: { [klass: string]: any; }
Write-Only

Description

Set the font of the containing element to the result of an expression.

      
      <some-element [ngStyle]="{'font-style': styleExp}">...</some-element>
    

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>
    

Methods

      
      ngDoCheck()
    
Parameters

There are no parameters.