What is the difference between these two markup examples for conditionally handling display?

<div *ngIf=”isVisible”>Active</div>
<div [hidden]=”!isVisible”>Active</div>
  •  The ngIf is shorthand for the other example. When Angular processes that directive, it writes a div element to the DOM with the hidden property.
  •  They are fundamentally the same.
  •  The ngIf directive does not render the div in the DOM if the expression is false. The hidden property usage hides the div content in the browser viewport, but the div is still in the in the DOM.
  •  The ngIf is valid, but the use of the hidden property is wrong and will throw an error.

Leave a Reply

Your email address will not be published. Required fields are marked *