@if vs *ngIf — Angular 17 : The newest version of Angul

Hello, today we will discuss the newest version of Angular. As you may already know, Angular 17 is now available and requires NodeJS version 20 or above. You may have noticed that you encounter an error when using the *ngIf directive in your HTML template like this

Why does this happen? It’s because Angular 17 has introduced block syntax for the if statement or *ngIf.

Now, I will show you how to use both the previous block syntax and the newest block syntax in the if statement.

1. *NgIf

First, let’s write HTML code in a component. In this example, I am using a new component.

Next, import NgIf from ‘@angular/common’ and place the *ngIf in the import section of the standalone component like this;

Run your Angular application, and you will receive no errors, indicating that the code has been successfully compiled.

2. @if

First, let’s write HTML code in a component. In this example, I am using a new component.

Or, you can simply use the else statement like this;

And please don’t forget to remove the previous code like this;

Run your Angular application, and you will receive no errors, indicating that the code has been successfully compiled.