What's the difference between display:none and *ngIf = 'false'?

Question

The display:none is css sheet. It
will remove elements from DOM tree. The ngIf = 'false' also remove elements from DOM tree. What's the difference between them?

Answer 1

display:none

From MDN Web Docs

The value none lets you turn off the display of an element; when you use none, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.

But when see the DOM of the page using dev tool, still elements does exist in the DOM tree. It means elements do not remove completely from the DOM tree.

---

*ngIf="false"

Completely remove the elements from the DOM tree. Because of that when it comes to page rendering, compare to display:none, using *ngIf="false" serving better performance with fast page rendering.

From Angular Guide

The ngIf directive doesn't hide elements with CSS. It adds and removes them physically from the DOM. Confirm that fact using browser developer tools to inspect the DOM.

When the condition is false, NgIf removes its host element from the DOM, detaches it from DOM events (the attachments that it made), detaches the component from Angular change detection, and destroys it. The component and DOM nodes can be garbage-collected and free up memory.

---

Following images will describe them well

1) Without using display:none and *ngIf="false"

2) Using display:none and *ngIf="false"

---

Comparison of hiding (display:none) vs removing (*ngIf='false')

From Angular Guide

The difference between hiding and removing doesn't matter for a simple paragraph. It does matter when the host element is attached to a resource intensive component. Such a component's behavior continues even when hidden. The component stays attached to its DOM element. It keeps listening to events. Angular keeps checking for changes that could affect data bindings. Whatever the component was doing, it keeps doing.

Although invisible, the component—and all of its descendant components—tie up resources. The performance and memory burden can be substantial, responsiveness can degrade, and the user sees nothing.

On the positive side, showing the element again is quick. The component's previous state is preserved and ready to display. The component doesn't re-initialize—an operation that could be expensive. So hiding and showing is sometimes the right thing to do.

But in the absence of a compelling reason to keep them around, your preference should be to remove DOM elements that the user can't see and recover the unused resources with a structural directive like NgIf .

These same considerations apply to every structural directive, whether built-in or custom. Before applying a structural directive, you might want to pause for a moment to consider the consequences of adding and removing elements and of creating and destroying components.

Hope this will help you to understand the difference between them.

Answer 2

display: none; does not prevent the browser from rendering that element.

ngIf = "false" will prevent that item from ever being rendered in the first place. The element will render if/when the ngIf evaluates to true, if the expression again changes back to false, then your element will be removed from the DOM tree entirely.

This is not true for display:none;. This only results in the element not being displayed and having any other CSS applied to it. display:none; will have no affect on the rate at which your page renders/loads.

This means the loading of your page will theoretically be faster using ngIf.