Angular @if vs ngIf, are they different?

Is there any benefit of using the new @if instead of the classic ngIf directive?

*ngIf version:

@Component({
standalone: true,
selector: 'scrollbars',
imports: [NgIf, ScrollbarX, ScrollbarY],
template: `
<scrollbar-x *ngIf="horizontalUsed()"/>
<scrollbar-y *ngIf="verticalUsed()"/>
`
})


@if version:

@Component({
standalone: true,
selector: 'scrollbars',
imports: [ScrollbarX, ScrollbarY],
template: `
@if (verticalUsed()) {
<scrollbar-y/>
}
@if (horizontalUsed()) {
<scrollbar-x/>
}
`
})


Besides the syntax difference, I noticed that I don't need to import NgIf or CommonModule to make @if work, which is nice!

I would appreciate if someone can explain if it works differently behind the scene

Continue reading...