ngIf directive is one of the Structural directive.
ngIf directive can be used in any HTML element like div, p, ul, li.
ngIf and ngFor cannot be used in the same element together.
ngIf Structural directive is used to conditionally show a template i.e., HTML DOM element.
ngIf directive has to be prefixed with an asterisk like *ngIf.
In AngularJS (Angular 1) it is ng-if directive. In Angular 2 and above it is *ngIf directive.
*ngIf and [hidden] do the same task, but there is a difference between them.
ngIf is Angular's built-in Structural directive and hidden is an HTML 5 attribute.
The way *ngIf and [hidden] works look like the same but behind the scenes it is different. ngIf removes the element from the DOM when the expression is evaluated to false whereas [hidden] hides the element from the DOM.
ng-hide/ ng-hide in Angular JS is replaced by [hidden] in Angular.
[hidden] can be better used for immediate switching between show/hide status.
Performance wise ngIf is faster than [hidden]. In a large application, ngIf removes the element from DOM and it helps to load the application faster.
Instead of ngIf, if [hidden] is used, the element remains in the DOM and the application will be slower.
<div *ngIf="user.loggedIn">
{{ user.name }}
</div>
The above syntax is converted internally into the below form by Angular.
<ng-template [ngIf]="user.loggedIn">
<div>{{ user.name }}</div>
</ng-template>
Instead of writing lengthy <ng-template [ngIf]=""></ng-template> code just use the shorthand *ngIf.
ngIf with else
else sytnax can used with ngIf syntax,
<div *ngIf="user.loggedIn; else loggedOut">True Condtion here</div>
<ng-template #loggedOut>False Condition here</ng-template>
The above ngIf else syntax can be made clean with the addition of then sytnax
ngIf with then and else
<div *ngIf="user.loggedIn; then loggedIn else loggedOut"></div>
<ng-template #loggedIn>True Condtion here</ng-template>
<ng-template #loggedOut>False Condition here</ng-template>