Say I check it against and expression, then aren't these two same ?
<div *ngIf="expression">{{val}}</div> <div [hidden]="!expression">{{val}}</div>
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.
What is the difference between ngIf and *ngIf in Angular? ngIf is the directive. Because it's a structural directive (template-based), you need to use the * prefix to use it into templates. *ngIf corresponds to the shortcut for the following syntax (“syntactic sugar”):
The DOM representation of the hidden attribute is a property also called hidden , which if set to true hides the element and false shows the element. Angular doesn't manipulate HTML attributes, it manipulates DOM properties because the DOM is what actually gets displayed.
The asterisk is "syntactic sugar". It simplifies ngIf and ngFor for both the writer and the reader. Under the hood, Angular replaces the asterisk version with a more verbose form.
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.
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With