What is angular ngStyle ? Example on ngStyle with condition

The Angular ngstyle conditionally applies a set of styles for the containing HTML element. The angular directive is classified into three groups, component, structure, and attribute directive. Both structure and attribute directives have a lot of built-in directives. The structure directive has the following built-in directive *ngIf, *ngFor , *ngSwitch and is used to transform the DOM structure.

We can add and remove a set of styles on an element by using an angular the ngStyle attribute directive based on a boolean condition. In previous articles, we have learned about directives in Angular.

What is styleClass directive

Angular has a lot of built-in attribute directives like ngClass, ngStyle, and ngModel. These directives are non-structure directives or attribute directives, mostly used to change DOM element appearance.

The ngStyle directive allows us to change the appearance of DOM elements by adding or removing CSS styles on elements in the template of the component.

The angular ngStyle directive syntax

With the ngStyle directive, you can set a given DOM element CSS properties from Angular
expressions. The element should receive an object with style names as keys and expressions as values that evaluate style values. If we want to set a single style then we can as below.

<some-element [ngStyle]="{ styleName: 'styleValue'}">
	Text of some elememt 
</some-element>

<div [style.background-color]="selected ? 'red' : 'blue'" >
    Some div content
</div>

If we want to apply multiple styles then we can use the ngStyle attribute directive as below and we can also have condition expression on this attribute.

[ngStyle]="{'background-color': 'grey', 'padding': '10px', 'color': 'white'}"

An Angular ngStyle example

We will have a few examples of the ngStyle directive. The first example is this directive is without any condition. We are setting a background image and background color using this attribute directive.

<button [ngStyle]="{ 'background-color': 'blue', 'color': 'white', 'border-radius': '4px'}">Submit</button>

<div [ngStyle]="{'background-image': 'url(' + photo + ')',
'background-repeat': 'no-repeat', 'height':'100px', 'background-size': '100% 100px'}">
  Set image to background of div element.
</div>

<div [style.background-color]="'blue'">
  Set background of div to blue
</div>

Angular ngStyle with condition example

In example two we will set style based on condition, if selected is true then anchor font is set to 800 and otherwise 500 font-weight.

<a href="" [style.font-weight]="selected ? '800' : '500'" >
  anchor text
</a>

Angular ngStyle with multiple styles
To add multiple styles to the element we can pass a set of styles using an object as

<p *ngFor="let number of numbers" [ngStyle]="number % 2 !== 0 ? 
	{'backgroundColor': 'red', 'font-size': '24px', 'font-weight': 'bold'} :     
        {}">
    {{ number }}
</p>

numbers = [1, 2, 3, 4, 5, 6, 7, 8];

Angular ngStyle with inline style object

We can also apply the object to this attribute directive, and the value of it can be set from the component typescript.

.....
export class AppComponent {
  amount = 200;

  styleObject: { [key: string]: string } = {
    'background-color': this.amount> 180 ? 'red' : 'black',
    'font-weight': this.amount> 180 ? 'bold' : 'normal',
  }
}

<div [ngStyle]="styleObject">
    Div content here
</div>

We can use method in ngClass directive expression

We can also pass the method on this attribute, this method will return an object with a list of styles we want to apply. Let’s demonstrate an example of it.

<span *ngFor="let number of numbers" [ngStyle]="setNumStyles(number)">
  {{ number }}
</span>

In the ngStyle we had assigned the setNumStyles method as an attribute, and this method check number as even or odd, based on that we have different styles.

numbers = [1, 2, 3, 4, 5, 6, 7, 8];
  setNumStyles(num: number) {
    let style;
    if (num % 2 == 0 ){
      style = { 
        'color': 'blue',
        'font-size': '12px'
       }
    } else {
      style = { 
        'color': 'red',
        'font-size': '14px'
       }
    }
    return style;
  }

The angular official document on the ngStyle directive for more information.

Check articles on the best and latest 2022, and 2021 Angular books to read for your journey from beginner to advanced level. BEST BOOK ON ANGULAR 2022 – 2021

Related posts

How to implement Angular ngStyle directive?