Why I Stopped Using ngIf and ngFor in Angular

I’ve been using Angular for quite some time, and like many developers, I got used to writing *ngIf, *ngFor, and ngSwitch in almost every component. They worked fine until Angular introduced a new syntax that completely changed how I write templates.

I’m talking about the new control flow syntax:
@if, @else, @for, @let, @switch, @case, and @default.

At first, I didn’t pay much attention. But after giving them a try, I quickly realized how much cleaner, simpler, and more natural my templates became.
Here’s why I stopped using the old syntax and why you might want to as well.

The Problem with the Old Syntax

The old *ngIf, *ngFor, and ngSwitch directives worked well, but they had a few downsides:

• The asterisks * looked strange to new developers.

• You often needed extra or tags.

• Nested conditions and loops were harder to read.

Angular’s new syntax fixes all of that. It’s built directly into the template engine, meaning no more directives — just clean, readable control flow.

@if and @else
The new @if syntax replaces *ngIf and feels much closer to regular JavaScript logic.

Before:

  Welcome back!



  Please log in.

Now:

@if (isLoggedIn) {
  
Welcome back!
} @else {
  
Please log in.
}

✅ Easier to read
✅ No blocks or template references
✅ Perfect for nesting conditions

@for
The classic *ngFor still works, but @for feels cleaner and reads more like plain JavaScript.

Before:

Now:

  @for (user of users; track user.id) {
    
{{ user.name }}
  }

✅ Simpler syntax (track instead of trackBy)
✅ No asterisk confusion
✅ Easier to reason about

@let
Sometimes you need to store a local variable in your template.
@let makes that super easy.

Before:

  
Hello {{ u.name }}

Now:

@let u = user;
Hello {{ u.name }}

✅ Cleaner variable handling
✅ Works outside @if blocks
✅ Makes templates easier to follow

@switch, @case, and @default
The new @switch syntax replaces ngSwitch and feels just like a real switch statement in JavaScript.

Before:

Now:

@switch (status) {
  @case ('active') {
    
Active
  }
  @case ('inactive') {
    
Inactive
  }
  @default {
    
Unknown
  }
}

✅ More readable
✅ No extra attributes
✅ Matches JavaScript logic perfectly

How to Start Using It

You’ll need Angular 17 or newer to use this new syntax.
If you’re upgrading, just run:

ng update @angular/core@latest @angular/cli@latest

No extra setup or imports needed — it’s ready out of the box.

Final Thoughts

After switching to the new syntax, my templates feel much cleaner and easier to maintain.
I don’t need to wrap everything in containers or remember special * rules anymore.

If you’ve been using Angular for a while, try replacing a few *ngIf or *ngFor blocks with the new syntax and you’ll instantly see the difference.

Sometimes small changes make a big impact and this one definitely does.