Using [hidden] instead of [ngIf] (Angular)

we have options in Angular to show hide HTML Element using *ngIf and [hidden] so now I'm going to tell what will happen when we use these options.

First of all, I need to explain the problem I have faced to look into this topic.

I had a hidden HTML input element that getting images and I have manually call the click function in a typescript method. So in my application, I have a cancel process that makes the page to its initial step, in there I am trying reset the value of the Input element as below,

(document.getElementById(‘importPhotoFileBrowser’) as HTMLInputElement).value = ‘’;

It worked! but, the thing is I am hiding the “Div” that contains the input element after some process completed to show another button instead of showing the import button to click the hidden input element manually. and previously I had used the [ngIf] to show and hide the div.

So what is happening****

The problem I have faced is the DOM element object is also getting removed when the [ngIf] is getting false and hiding whatever the element that you need. Then when I tried to set the value to null of the input element (that hidden in the Div that I have used the [ngIf] property) to remove the selected item its throwing errors to the console in the browser.

When using the [hidden] to show hide the elements it's not going to remove the DOM element object. It is only hiding the element by adding the CSS
display: none.
to the Element.

So this is the difference between using [ngIf] and [hidden] in angular to show hide any element.

I think this will help you a lot in the future.