*ngIf and *ngFor on same element causing error

Matheus Mello
Matheus Mello
September 2, 2023
Cover Image for *ngIf and *ngFor on same element causing error

How to Fix *ngIf and *ngFor on Same Element Error in Angular

If you've encountered an error when trying to use Angular's *ngIf and *ngFor directives on the same element, you're not alone! Many developers face this issue when attempting to loop through a collection using *ngFor, only to have the collection be seen as null when combined with an *ngIf condition.

The Problem

The error occurs because the *ngIf directive evaluates its condition before the *ngFor directive renders the elements. This means that when the *ngIf condition is false, the element that should be repeated by *ngFor is not present, causing Angular to see the collection as null.

In the provided example, the *ngFor loop is inside the *ngIf condition, making it susceptible to this error.

The Solution

Fortunately, there is an easy solution to resolve this issue. To avoid the error, you need to separate the *ngIf and *ngFor directives onto different elements.

Instead of having the *ngIf and *ngFor on the same <div> element, you can move the *ngIf to a higher-level element while keeping the *ngFor on the desired element:

<div *ngIf="show">
  <div *ngFor="let thing of stuff">
    {{ log(thing) }}
    <span>{{ thing.name }}</span>
  </div>
</div>

By doing this, the *ngIf condition will be evaluated first, and if it is true, the *ngFor directive will generate the intended elements without encountering the null issue.

The Plunker Example

To see the solution in action, you can check out the Plunker example provided in the question. By applying the changes mentioned above, the console error should no longer occur.

Conclusion

Encountering errors when trying to use *ngIf and *ngFor on the same element in Angular is a common issue. However, by separating these directives onto different elements, you can easily resolve the problem and ensure the smooth rendering of your templates.

Now that you know how to fix this error, go ahead and update your Angular code to prevent any future issues. Happy coding! 🚀


Did you find this blog post helpful? Do you have any other Angular questions or problems? Share your thoughts in the comments below and let's discuss! Don't forget to check out my other posts for more cool tech tips and tricks. If you liked this article, share it with your fellow developers on your favorite social media platform!

Take Your Tech Career to the Next Level

Our application tracking tool helps you manage your job search effectively. Stay organized, track your progress, and land your dream tech job faster.

Your Product
Product promotion

Share this article

More Articles You Might Like

Latest Articles

Cover Image for How can I echo a newline in a batch file?
batch-filenewlinewindows

How can I echo a newline in a batch file?

Published on March 20, 2060

🔥 💻 🆒 Title: "Getting a Fresh Start: How to Echo a Newline in a Batch File" Introduction: Hey there, tech enthusiasts! Have you ever found yourself in a sticky situation with your batch file output? We've got your back! In this exciting blog post, we

Cover Image for How do I run Redis on Windows?
rediswindows

How do I run Redis on Windows?

Published on March 19, 2060

# Running Redis on Windows: Easy Solutions for Redis Enthusiasts! 🚀 Redis is a powerful and popular in-memory data structure store that offers blazing-fast performance and versatility. However, if you're a Windows user, you might have stumbled upon the c

Cover Image for Best way to strip punctuation from a string
punctuationpythonstring

Best way to strip punctuation from a string

Published on November 1, 2057

# The Art of Stripping Punctuation: Simplifying Your Strings 💥✂️ Are you tired of dealing with pesky punctuation marks that cause chaos in your strings? Have no fear, for we have a solution that will strip those buggers away and leave your texts clean an

Cover Image for Purge or recreate a Ruby on Rails database
rakeruby-on-railsruby-on-rails-3

Purge or recreate a Ruby on Rails database

Published on November 27, 2032

# Purge or Recreate a Ruby on Rails Database: A Simple Guide 🚀 So, you have a Ruby on Rails database that's full of data, and you're now considering deleting everything and starting from scratch. Should you purge the database or recreate it? 🤔 Well, my