Software⏱️ 2 min read📅 2026-05-31

How to Fix: *ngIf and *ngFor on same element causing error

Learn how to fix: *ngIf and *ngFor on same element causing error.

Quick Answer: Try checking your system settings or restarting.

📋 Table of Contents

  1. ⚠️ Common Causes
  2. 🚀 How to Resolve This Issue
  3. 💡 Conclusion

When using *ngFor and *ngIf directives on the same element in Angular, it can cause issues due to the order of evaluation. The template compiler evaluates the ngIf directive first, which means that if the condition is false, the entire element will be removed from the DOM. If you then try to iterate over the collection using ngFor, it will see the element as null because it was removed.

⚠️ Common Causes

  • Using ngIf on the same element as ngFor.

🚀 How to Resolve This Issue

Method 1: Reorder Your Directives

  1. Step 1: Move the ngIf directive inside the ngFor loop.

Method 2: Use a Separate Element for ngIf

  1. Step 1: Create a separate element for the ngIf directive.

💡 Conclusion

By reordering your directives or using a separate element for the ngIf directive, you can resolve the issue of *ngFor and *ngIf causing errors on the same element.

Did this fix your problem?

If not, try searching for specific error codes.

🔍 Search Error Database

❓ Frequently Asked Questions

🛠️ Related Fixes

How to Fix: Pc crashes shortly after launching game (rainbow

Pc crashes shortly after launching game, possible cause: outdated grap

How to Fix: Installing an APK on a locked down phone

Installing an APK on a locked down phone: Try using a rooted device, e

How to Fix: FPS drops

FPS drops in games can be caused by high system resource usage, outdat