What is the difference between NgIf and [hidden]?

So which one should you use in that cool Angular app you're currently working on?

Should it be NgIf or simply the hidden attribute?

I know what it's like to get that nagging feeling about the different ways to do the same thing...

...you wanna know what's going on under the hood and which one is faster or better.

So... what is the difference between NgIf and hidden? And which one should you use?

Before I say anything else I've got to make it clear that *ngIf is a feature specific to the Angular framework where as hidden is a common HTML attribute.

Although both directives can be used to achieve similar results, they have fundamental differences and are suitable for different scenarios.

So... I'll be showing you the difference between ngIf and hidden, and their respective benefits and use cases.

ngIf

ngIf is a structural directive in Angular that conditionally adds or removes elements from the DOM based on the expression it receives. The element and its child components are only created and added to the DOM when the expression is truthy. Otherwise, they are removed from the DOM.

One of the main benefits of using ngIf is that it reduces the overall DOM size and improves performance by removing unnecessary elements from the DOM. This is especially useful when dealing with large and complex components or lists.

Another advantage of ngIf is that it can help prevent errors caused by undefined or null values.

When using ngIf, the expression is evaluated before the element is added to the DOM, which ensures that any data or property used in the expression is defined and avoids errors that can occur when accessing undefined properties or data.

ngIf is also useful when dealing with complex conditional logic or when you need to dynamically change the template based on the application state.

However...

ngIf can also have some downsides, such as reducing the overall performance when used excessively or when dealing with complex expressions. Since the element is completely removed from the DOM, it also means that any state or data associated with that element will be lost when it is removed, which can sometimes cause additional overhead when re-creating the element.

Hidden

[hidden] is a property binding in Angular that hides or shows elements based on the value of the property.

Unlike ngIf, [hidden] does not remove the element from the DOM, but instead only adds a style attribute with the value "display: none" to hide the element.

The main benefit of [hidden] is that it provides a simple and lightweight way to conditionally hide elements without affecting the overall DOM structure or performance. Since the element is still present in the DOM, any state or data associated with that element will be preserved, and it can be easily shown again by updating the property value.

[hidden] is also useful when dealing with simple conditional logic or when you need to toggle the visibility of an element based on user interaction.

However, [hidden] has some limitations when it comes to more complex conditional logic or dynamic changes to the template. Since the element is still present in the DOM, it can affect the overall performance when dealing with large and complex components. Additionally, [hidden] cannot prevent errors caused by undefined or null values, which can still cause errors when accessing undefined properties or data.

So, which one is best? 🤔

Well... actually... neither one is better then the other.

It really depends on what you're trying to accomplish.

I'm of the opinion that ngIf is more suitable for complex conditional logic or when dealing with large and complex components or lists, while hidden is more suitable for simple conditional logic or when you need to toggle the visibility of an element based on user interaction.

When you're trying to decide which directive to use, it's important to consider the overall performance, complexity of the logic, and the data or state associated with the element. By choosing the appropriate directive for the specific scenario, you can improve the overall user experience and optimize the performance of your application.

So what are your thoughts? Shoot me a message and let me know.

Till later,

Angular Freelancer & Consultant