Combining ngStyle with ngIf and else Condition

When working with Angular, controlling DOM structure and styling dynamically is a common use case. A great way to achieve this is by using Angular’s built-in directives like ngIf to conditionally display elements and ngStyle to apply dynamic styles. You may often find yourself needing to use both together in a clean and efficient way.

In this blog post, we’ll walk through how to combine ngStyle with ngIf and else, and how to do so across different Angular versions, including the latest version of Angular.

Understanding ngIf and ngStyle

ngIf is a structural directive that conditionally includes or excludes an element from the DOM based on a boolean expression. It supports an optional else clause that allows rendering an alternative template when the condition is false.
ngStyle is an attribute directive that allows you to conditionally apply inline CSS styles to an element based on an expression.

Using ngIf with ngStyle (Angular Versions 2 – 12)

In earlier Angular versions (2 to 12), you would often combine ngIf and ngStyle by using them separately but together on the same element. You may also define an alternative template with ngIf’s else clause.

Example (Angular 2-12):

<div *ngIf="isActive; else inactiveBlock" [ngStyle]="{'color': isActive ? 'green' : 'red'}">
   Active: The component is active!
</div
<ng-template #inactiveBlock>
    <div [ngStyle]="{'color': 'gray'}">
       Inactive: The component is inactive!
     </div>
</ng-template>

In the example above:

• We check the isActive boolean using ngIf.
• If isActive is true, the element’s style is conditionally set using ngStyle to apply green color.
• If isActive is false, the template renders a gray-colored message using the else block.

Using ngIf with ngStyle in Angular 13+

In Angular 13 and newer, there have been performance and style handling improvements, but the basic combination of ngIf and ngStyle remains quite similar to the previous versions.

However, newer Angular versions allow for a cleaner syntax and better code organization due to enhancements in Angular’s Ivy rendering engine, which is default since Angular 9, but further optimized in later versions. The use of directives and their combination has been made more efficient, so performance is improved when using conditionals like ngIf.

Example (Angular 13+):

	Active State: Active!


	

	Inactive State: Inactive.
	

Changes:

• The syntax remains the same, but modern Angular versions provide faster change detection and better DOM handling.
• In this example, we’re adding both background-color and color using ngStyle, and they change based on the isActive state.

Using ngIf with ngStyle in Angular 16+

Starting from Angular 16, you can use @if and @else for a more natural control flow, similar to if-else statements in JavaScript. This new syntax removes the need for explicit ng-template tags and improves readability.

Combining ngStyle with the new control flow syntax is straightforward. You can use ngStyle on elements inside the @if and @else blocks, just as you would with the traditional approach.

Example (Angular 13+):

@if (isActive) {
  

	The component is active!
  
} @else {
  

	The component is inactive.
  
}

In this example:

• We use the new @if syntax to conditionally render two different div elements based on the isActive boolean value.
• In the @if block, ngStyle is used to apply a green color and bold text style when isActive is true.
• In the @else block, ngStyle applies a gray color and italic text style when isActive is false.

Best Practices

When combining ngIf, ngStyle, and else conditions in Angular, consider these best practices:

1. Minimize Complex Logic in the Template

Keep your template clean by avoiding complex logic inside ngIf or ngStyle. If the logic is complicated, move it to the component’s TypeScript code for clarity.

Example:
typescript

get activeStyles() {
  	return this.isActive ? { color: 'green' } : { color: 'red' };
}

In the template:

	Active State

2. Reuse Styles for Multiple Elements

If multiple elements require similar styles, consider using a shared method or a class instead of repeating ngStyle logic.

3. Avoid Overuse of ngIf for Simple Visibility

If the goal is just to hide or show an element, consider using [hidden] or CSS classes instead of ngIf to improve performance, as ngIf removes elements from the DOM entirely.

Example:

Visible when active