Hidden Property in Angular

Introduction

To conditionally show the HTML template we use ngIf in Angular. But we also have a DOM property to hide and show elements. If the hidden property is set to true, the element will be hidden. The hidden attribute is used to hide the element. Add the attribute to the element we wish to hide. The HTML attribute will not manipulate the element.

<div hidden>List of employees</div>

Add the hidden attribute shown above to hide the element. The important thing to consider regarding the hidden attribute is that it will only hide the element. The element is still present in the DOM. The hidden attribute can be used as property binding to bind the underlying DOM object. The hidden property is the DOM representation of hidden attribute. 

Difference between DOM property and HTML attribute

When HTML is rendered in the browser a DOM is created. If we change the DOM, the page will be updated at the same time. The HTML attribute is hidden which when added to the element will hide it. The DOM property of this attribute is called hidden. If the DOM property is set to hidden=true, it will hide the element. On the other hand, hidden=false shows the element. In Angular, we manipulate DOM property rather than an HTML attribute. [hidden] will always manipulate the property of the DOM. 

Hidden Property Binding

The hidden property binding is also called Input Property Binding. We can set the binding as follows. If the DOM property is set to hidden=true, it will hide the element.
On the other hand, hidden=false shows the element.

<div [hidden]="employees.length == 0">List of employees</div> /Here employees is the employee array
<div [hidden]="employees.length > 0">No employees</div>

In the above example, if the employee array has some employees then the employee.length will be greater than zero. Then [hidden]="true" for <div [hidden]="employees.length > 0">No employees</div>. Then the user will see List of employees title on the webpage. 

Difference between [hidden] property and *ngIf

The basic difference between ngIf and [hidden] property are as follows:
  • The hidden property will not remove the element from the DOM. But ngIf completely removes the element from the DOM tree. The hidden property keeps the element in the DOM if the element is hidden. 
  • If we are working with a large DOM tree with lots of branches and children, it is better to use ngIf as the elements will use unnecessary space and other resources. There is no need to put the elements in the DOM when we are showing them to the user.
  • The angular change detection cycle runs on all DOM elements. If the elements are hidden in the DOM, then also angular continues to check for changes during its change detection cycle. It is better to use ngIf so that angular will not track elements during its change cycle.
  • To free up resources such as memory, computing resources, time to keep the view in sync. It is better to use ngIf with a large tree of objects.
  • If we have sub-component in which we just have to show and hide some part of the page on a button click. Building such a small element, again and again, using ngIf is costly. It is better to keep them in DOM and show or hide.

Comments