Difference Between NgIf And Hidden Or Display:none In Angular (angularjswiki.com)

Difference Between NgIf And Hidden Or Display:none In Angular

ngif vs hidden or display:none

Arunkumar Gudelli

Last updated on Oct 19, 2019 3 min read

The main difference between angular ngIf directive & hidden or display:none is ngIf will add or remove the element from DOM based on condition or expression. hidden attribute in html5 and display none CSS will show or hide the HTML element.

We will go through the examples to understand them further.

Table of Contents

• • ngIf in Angular
  • hidden or display:none in Angular
  • Why ngIf directive remove the element rather than hide it?
  • ngIf vs hidden or display none in Angular

ngIf in Angular

Have a look at a simple ngIf example

<div *ngIf="true">This will be added to DOM by ngIf</div>
<div *ngIf="false">This will be removed from DOM by ngIf</div>

<ng-template *ngIf="true">
<div>This will be added to DOM by ngIf</div>
</ng-template>
<ng-template *ngIf="false">
<div>This will be removed from DOM by ngIf</div>
</ng-template>

As explained in ngIf else article angular will convert the ngIf element to <ng-template> element. See the generated HTML DOM.

ngIf vs Hidden

And the second div is not at all added the DOM. Angular will convert <ng-template> to a comment which gives us information about evaluated ngIf condition true or false.

hidden or display:none in Angular

Now we will see an example with hidden attribute in html5 and display none CSS.

<p [style.display]="'block'">
This paragraph is visible.
</p>
<p [style.display]="'none'">
This paragraph is hidden but still in the DOM.
</p>
<p hidden>
This paragraph is hidden but still in the DOM.
</p>

And the generated HTML is

ngIf hidden in Angular

Irrespective of display hide or show the paragraph element will be added to the DOM.

Why ngIf directive remove the element rather than hide it?

Hiding and showing the element after rendering is fine if the paragraph or div element is very small and with simple interaction.

But with Angular, we can build rich applications some of the components may use too many resources. And even though the component is hidden, the component will be attached to its DOM element. It will keep on listening for events. Angular keep on checking for changes related to data bindings. The component behavior still exists even though it is hidden.

The component and its children components will be tie up resources. Memory burden might be high which results in poor performance, responsiveness can degrade and the user has no knowledge, why the application is slow.

So it’s better to add or remove elements to the component element to the HTML DOM rather than hiding or showing them.

But as I said earlier if the component is simple it is better to hide or show it, because component reinitialization operation could be expensive.

ngIf vs hidden or display none in Angular

ngIf	hidden or display none
Angular's structural directive	Normal HTML5 attribute
No DOM element is added if ngIf evaluates to false.	DOM element will be added to HTML
ngIf might be slow while adding removing elements to the DOM because of intializations	As the element is already added to DOM showing and hiding or very fast
Ideal for rich angular applications	Ideal if the component is simple no much interaction

I hope you understand all the differences between ngIf and hidden or display none in Angular