4 If Then Else

Angular 6, 5, 4 If Then Else directives

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

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

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

Angular 6, 5, 4 If Then Else directives Angular 6, 5, 4 If Then Else directives Reviewed by Anil Singh on 2:26 AM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^