How to Fix *ngFor and *ngIf Not Working in Angular 21

Angular developers often rely heavily on structural directives like *ngFor and *ngIf. However, in Angular 21, many developers face issues where these directives don’t behave as expected.

This guide will walk you through why this happens, common mistakes, and step-by-step fixes.

---

🚨 Common Symptoms

• *ngIf not rendering content even when condition is true
• *ngFor not looping through array
• No errors in console but UI not updating
• Data is present but not displayed

---

🧠 Understanding the Basics

• *ngIf → Conditionally renders elements
• *ngFor → Iterates over collections

Both are structural directives, meaning they manipulate the DOM.

---

🔍 1. Missing CommonModule (Standalone Components)

❌ Problem

In Angular 21, standalone components are widely used. If you forget to import CommonModule, directives like *ngIf and *ngFor won’t work.

✅ Solution

import { CommonModule } from '@angular/common';

@Component({
  standalone: true,
  imports: [CommonModule],
})
export class MyComponent {}

---

🔍 2. Incorrect Variable Initialization

❌ Problem

items: any[];

If items is undefined, *ngFor won’t render.

✅ Solution

items: any[] = [];

---

🔍 3. Async Data Not Loaded Yet

❌ Problem

Data from API is not available when template loads.

✅ Solution

Use safe navigation or async pipe:

<div *ngIf="user$ | async as user">
  {{ user.name }}
</div>

---

🔍 4. Change Detection Issues

Angular 21 uses optimized change detection. Sometimes UI doesn’t update.

❌ Problem

Updating array without changing reference:

this.items.push(newItem);

✅ Solution

this.items = [...this.items, newItem];

---

🔍 5. Incorrect Syntax Usage

❌ Problem

<div ngIf="true"></div> <!-- Missing * -->

✅ Solution

<div *ngIf="true"></div>

---

🔍 6. Using trackBy Incorrectly

❌ Problem

Wrong trackBy function breaks rendering.

✅ Solution

trackByFn(index: number, item: any) {
  return item.id;
}

<div *ngFor="let item of items; trackBy: trackByFn">

---

🔍 7. Standalone + Lazy Loading Issues

Angular 21 encourages lazy loading. Sometimes directives fail due to missing imports in lazy modules.

✅ Fix

Ensure CommonModule is imported in every lazy-loaded component/module.

---

🔍 8. Template Scope Issues

❌ Problem

Variable used outside its scope:

<div *ngIf="user as u"></div>
<p>{{ u.name }}</p> <!-- Error -->

✅ Solution

<div *ngIf="user as u">
  <p>{{ u.name }}</p>
</div>

---

🔍 9. Angular Signals (New Feature)

Angular 21 introduces signals.

❌ Problem

Using signals incorrectly:

items = signal([]);

<div *ngFor="let item of items"></div> <!-- Won’t work -->

✅ Solution

<div *ngFor="let item of items()"></div>

---

🔗 Helpful External Resources

• Angular Official Docs: https://angular.dev
• Structural Directives Guide: https://angular.dev/guide/directives
• Change Detection Explained: https://blog.angular.io

---

✅ Best Practices

• Always initialize variables
• Use async pipe for observables
• Prefer immutable updates
• Import CommonModule in standalone components
• Use trackBy for performance

---

💡 Pro Tip

If nothing works, try:

ng serve --hmr=false

Or restart Angular dev server — caching issues sometimes cause rendering bugs.

---

🏁 Conclusion

Issues with *ngIf and *ngFor in Angular 21 are usually due to:

• Missing imports
• Improper state handling
• Change detection quirks
• New features like signals

Once you understand these patterns, debugging becomes much easier.

---

🔥 Hashtags

#Angular21 #AngularFix #ngIf #ngFor #WebDevelopment #Frontend #AngularErrors #JavaScript #TypeScript #CodingTips #UIBugFix #AngularStandalone

View Other Solutions