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

@coder explained the difference really well. The fact that "display: none;" doesn't destroy the element also means that if you're using it to hide a component, the component's onDestroy method does not get called, and all its subscriptions will persist

Answer 2

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 3

ngIf is an angular directive and display:none is a CSS class property with value none. They have a uniqueness in the way they render the HTML DOM of the page.

ngIf

ngIf directive removes or recreates a portion of the DOM based on an expression. As per the OP you supply the expression as false (ngIf = 'flase'). Hence, the element will be remove from the DOM.

When an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored. The scope created within ngIf inherits from its parent scope using prototypical inheritance.

display:none

The display:none hides the given HTML element. display is the CSS class onto the element and sets the display style to none.

Answer 4

display:none hides the element, but if you explore the DOM with the Chrome Dev Tools (for example) you can see that the element is present. It is not removed. With ngIf, the element is removed from the DOM.

display:none is the equivalent of ng-hide/ng-show in AngularJs.

Warning! Is true that using ngIf the page load faster, but if you have an element that will be switching between show and hide more than once, is better to use display:none or ngHide, because every change between ngIf = false and ngIf = true, will generate a request to the server.

By!

Answer 5

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.

Answer 6

display:none; will remove the DOM elements visual style / physical space from the DOM, Not completely the element itself. Which can be replaced with the attribute [Hide] in angular.

whereas *ngIf is a angular builtin directive which and *ngIf if false will remove the element from the DOM