@if(...)

This video explains the new @if control flow syntax in Angular 17, highlighting its advantages over the traditional *ngIf directive, with practical examples and best practices.

The new @if which we can use to replace *ngIf is available from Angular 17. The new syntax is much cleaner and easier to read and write, and more powerful.
Let’s go over the changes:

*ngIf -> @if

The old way of creating an if statement in your angular templates was by using the *ngIf directive.
The new way is by using the @if syntax.
let’s see an example:

Few things to note here:

• The @if syntax is much cleaner and readable.
• The else case is much easier to write in the new syntax.
• You can use @else if which you can’t in the old syntax.

Playground

You can practice the new @if syntax in the playground below: