The most common usage of the NgIf directive is to
conditionally show or hide the HTML templates. Now, you can write Angular if,
else and then in HTML directly.
The NgIf evaluates the expression and then
renders the then or else template in its place when expression is true or false
respectively.
1. Then
template is the inline template of NgIf unless bound to a different value.
2. Else
template is blank unless it is bound.
Conditionally includes a template based on the
value of an expression.
@Directive({
selector: '[ngIf]'
})
class
NgIf {
constructor(_viewContainer:
ViewContainerRef, templateRef:
TemplateRef<NgIfContext>)
set ngIf:
any
set ngIfThen:
TemplateRef<NgIfContext>
| null
set ngIfElse:
TemplateRef<NgIfContext>
| null
}
Using
Angular Template for ngIf -
The <template>
deprecated, now Angular 6 introduce <ng-template>.
You should use <ng-template>
instead of <template>.
For
example, previously (Angular 2,4 and 5) you are using
<template [ngIf]="IsAdmin">
<p>This template
renders only if IsAdmin is true.</p>
</template>
Now in
Angular 6, you should use <ng-template> instead of <template>
<ng-template [ngIf]="IsAdmin">
<p>This template
renders only if IsAdmin is true.</p>
</ng-template>
Lest explain in depths -
Just
Use Angular If -
<div
*ngIf="IsAdmin">
If IsAdmin is true
</div>
Using
Angular If with Else (Please notice to your template name)
<div
*ngIf="IsAdmin;
else yourtemplatename">
If IsAdmin is true
</div>
And
<ng-template
#yourtemplatename>
If IsAdmin is false
</ng-template>
Using
Angular If with Then (Please notice to you template name)
<div
*ngIf="IsAdmin;
then YourtemplateName">
Here is never showing
</div>
And
<ng-template
#YourtemplateName>
If IsAdmin is true
</ng-template>
Using
Angular If with Then and Else -
<!--
Angular If then else -->
<div
*ngIf="IsAdmin;
then thenTemplateName else elseTemplateName">
Here is never showing.
</div>
And
<!-- thenTemplateName -->
<ng-template
#thenTemplateName>
If isValid is true
</ng-template>
And
<!-- elseTemplateName -->
<ng-template
#elseTemplateName>
If isValid is false
</ng-template>
We
can also applying to ngIf, ngIfElse and ngIfThen the following ways
-
<ng-template
[ngIf]="IsAdmin"
[ngIfElse]="loggedOut">
<div>
Welcome back, Anil!
</div>
</ng-template>
And
<ng-template
#loggedOut>
<div>
Please login.
</div>
</ng-template>
Handling
Observables with NgIf and the Async Pipe –
<div
*ngIf="user$
| async as user; else waiting">
<user-info
[user]="user.info"></user-info>
<user-msg [user]="user.msg"></user-msg>
</div>
And
<ng-template
#waiting>
Loading...
</ng-template>
For more detail kindly refer the link –
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|