97

Say, I check it against an expression, then aren't these two the same?

<div *ngIf="expression">{{val}}</div>

<div [hidden]="!expression">{{val}}</div>
Improve this question
2
  • Pretty much the same as angularjs stackoverflow.com/questions/19177732/… Commented Mar 26, 2017 at 21:59
  • 4
    The question itself helped me to notice that I forgot to invert the boolean condition :-) Commented Nov 26, 2019 at 13:19

7 Answers 7

Reset to default
109

There is actually a performance difference between them:

ngIf will comment out the data if the expression is false. This way the data are not even loaded, causing HTML to load faster.

[hidden] will load the data and mark them with the hidden HTML attribute. This way data are loaded even if they are not visible.

So [hidden] is better used when we want the show/hide status to change frequently, for example on a button click event, so we do not have to load the data every time the button is clicked, just changing its hidden attribute would be enough.

Note that the performance difference may not be visible with small data, only with larger objects.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Agreed! ngIf shouldn't be considered when working with larger data to be rendered often. ngIf can be considered in cases where the page is extremely larger and we need to render large data through an API call or something. When we work with just the already rendered page's sections like navbars, hidden attribute is way faster.
The difference is even bigger when images are inside the ngIf block. It seems that on Safari (iOS iphone), the images may be reloaded each time which considerably reduces performances. So if you can have choice between ngIf and hidden, prefer hidden. Definitely.
43

ngIf is a structural directive, it creates/destroys content inside the DOM. The second statement just hides/shows the content with css, i.e. adding/removing display:none to the element's style.

What are structural directives?

Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements.

In the first case if expression is false then div and it's content won't be created. In the second case div and content are always created but they are not visible if the expression is false.

Improve this answer

Comments

21

There is actually another difference between them when you try to manipulate elements within the structures that are wrapped within a section:

ngIf will cause an undefined error in your code if you try reference an element within that section when is false.

[hidden] will not cause an undefined error in your code if you try to reference an element within the section, when that section is hidden.

So [hidden] is better used when we want to operate on elements within the wrapped section.

Improve this answer

3 Comments

yulp, can't agree more.
This was the reason I found this answer. I was trying to reference a table with a template ref (eg: #searchResults) from an external search button. When trying to hide the grid when no results are found, I was getting an error. The hidden was a good option because the user would probably search multiple time until he finds what he wants and I am always able to reference things from outside the scope of elements that should be hidden. Very good.
Glad it helped you stackoverflow.com/users/692083/m%c3%a1rio-meyrelles -- I have to return here to remind myself every now and then :-)
17

*ngIf if false will remove the element from the DOM

Hidden if true will set the display to none in css

Improve this answer

Comments

4

An additional key point, it may break mat-paginator who is inside of a *ngIf block. For example

.HTML

<div *ngIf="myCondition">
    <mat-paginator #seeMe ...></mat-paginator>
</div>

.TS

this.dataSource.paginator = this.seeMe;  // seeMe becomes underfined

Solution: <div [hidden]="!myCondition">

Improve this answer

Comments

2

*ngIf will include and remove the element from the DOM if set to true and false respectively. [hidden] in angular2 is the equivalent of ngshow and nghide that we had in AngularJS.It just shows and hides the element by add display:none and display:block.

Improve this answer

Comments

-3

Scenario :--> suppose you are using Behaviorsubject, and it emits boolean value "true/false".

Case 1 --> *ngIf --> if Behaviorsubject returns initial value false, then it will disappear that DOM. and even if it emits true value later, it wont be visible.

Case 2 --> Hidden --> it will work perfectly based on Behaviorsubject's emited value. i.e it will toggle the DOM.

Note - *ngIf also toggles the DOM but on user's action or DOM event that toggles value of ngIf.

Improve this answer

1 Comment

Behaviorsubject is not mentioned in this question.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.