python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions