What is the difference between *ngIf and [hidden]?

问题:

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

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

<div [hidden]="!expression">{{val}}</div>

回答1:

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.

回答2:

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.

回答3:

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.

回答4:

*ngIf if false will remove the element from the DOM

Hidden if true will set the display to none in css

回答5:

*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.