Angular ngIf Directive

 *ngIf directive:

-----------------
This is used to show[add]|hide[remove] html element [ from browser DOM]

Syntax:
 1. <tagname *ngIf="cond">    --> if(cond)
         ...                      { ... }
    </tagname>

 2. <tagname *ngIf="cond;then template1 else template2">  --> if(cond)
    </tagname>                                                { .. }
                                                                     else
                                                                       {...}

The basic syntax of the ngIf directive is very simple, all we need to do is prefix the directive name with an asterisk (*) 

Example

.html changes

<div *ngIf="isValid">
    <b>The Data is valid.</b>
 </div>  

 <div *ngIf="!isValid">
    <b>The Data is invalid.</b>
 </div> 

.ts Changes

import { Component } from '@angular/core';

@Component({
  selector: 'app-ngswitchdemo',
  templateUrl: './ngswitchdemo.component.html',
  styleUrls: ['./ngswitchdemo.component.css']
})
export class NgswitchdemoComponent {
  isValid:boolean=true;
}

Output

Example 2

.html 

<div>
   <input type="radio" name="rb" (click)= "ChangeData(true)" checked > Valid
   <input type="radio" name="rb" (click)= "ChangeData(false)"> Invalid
 </div>

 <div *ngIf="isValid">
    <b>The Data is valid.</b>
 </div>  
  
 <div *ngIf="!isValid">
    <b>The Data is invalid.</b>
 </div>


.ts


import { Component } from '@angular/core';

@Component({
  selector: 'app-ngswitchdemo',
  templateUrl: './ngswitchdemo.component.html',
  styleUrls: ['./ngswitchdemo.component.css']
})
export class NgswitchdemoComponent {
  isValid: boolean = true;
      ChangeData(valid: boolean) {
        this.isValid = valid;
    }
}


Output











NgIf directive with else block
Here, we need to use ngTemplate for else Block

Syntax:

<div *ngIf = “condition; else elseBlock”>…</div>
<ng-template #elseblock>….</ng-template>


.html

<div>
   <input type="radio" name="rb" (click)= "ChangeData(true)" checked > Valid
   <input type="radio" name="rb" (click)= "ChangeData(false)"> Invalid
 </div>

 <div *ngIf="isValid else elseblock">
    <b>The Data is valid.</b>
 </div>  

 <ng-template #elseblock>
   <div >
       <b>The Data is invalid.</b>
    </div> 
 </ng-template>


.ts changes

isValid: boolean = true;
      ChangeData(valid: boolean) {
        this.isValid = valid;
    }


Output
















Example 3

.html 

<div style="font-size:x-large;margin:10px">
   enter number:<input type="number" [(ngModel)]="n"> <br>
   <span *ngIf="n%2==0;then template1 else template2"></span>
   <ng-template #template1>even</ng-template>
   <ng-template #template2>odd</ng-template>
  </div>
  <hr>
  <button (click)="toggle()">
      {{flag?'hide':'show'}} prod info
  </button>
  <div style="font-size:x-large;border:5px solid black;margin:10px;width:30%" *ngIf="flag">
   productid:p001 <br>
   name  :aiwa tv <br>
   pic   :<br>
   <img src="./assets/aiwa.jpg" height="200" width="200">  
  </div>


.ts changes

import { Component } from '@angular/core';

@Component({
  selector: 'app-ngswitchdemo',
  templateUrl: './ngswitchdemo.component.html',
  styleUrls: ['./ngswitchdemo.component.css']
})
export class NgswitchdemoComponent {
  n:number=0;
  flag:boolean=false;


 toggle()
 {
   this.flag=!this.flag;
 }
}


Output

Angular ngSwitch Directive

 This is used to implement switch case with html

Syntax:

   <tagname [ngSwitch]="varname">

   <tagname *ngSwitchCase="value1">..</tagname>
           ...
   <tagname *ngSwitchDefault>...</tagname>
   </tagname>

It is actually a combination of two directives i.e. an attribute directive and a structural directive. It is very similar to the switch statement of other programming languages like Java and C# but within a template.

Here, you can also define a default section using the ng-switch-default directive to show a section if no other sections get a match. So, while working with ngSwitch directive, you need three things to keep in mind, they are ngSwitch, ngSwitchCase and ngSwitchDefault.

Example




Now, my requirement is based on the selected course the require topics to be displayed .
.ts Changes
import { Component } from '@angular/core';

@Component({
  selector: 'app-ngswitchdemo',
  templateUrl: './ngswitchdemo.component.html',
  styleUrls: ['./ngswitchdemo.component.css']
})
export class NgswitchdemoComponent {
  coursename:string="";
}


.html

<select [(ngModel)]="coursename">
    <option value="">-select course-</option>
    <option>angular</option>
    <option>reactjs</option>
  </select>
  <hr>
  <div style="font-size:x-large" [ngSwitch]="coursename">
      <ul *ngSwitchCase="'angular'">
          <li>databindings</li>
          <li>directives</li>
          <li>routing</li>
      </ul>
      <ul *ngSwitchCase="'reactjs'">
          <li>databindings</li>
          <li>axois</li>
          <li>redux</li>
      </ul>
      <span *ngSwitchDefault>select course to get details..</span>
  </div>


Output
















note:
-----
*user selected list item with in dropdown list will be assigned to course name variable by ngModel[two-way databinding]
*whenever course name variable value changes,ngswitch will be executed,it will verify | compare course name variable value with ngswitchcase, matching ul tag will be loaded for presentation




Example 2

.ts changes

import { Component } from '@angular/core';
@Component({
  selector: 'app-ngswitchdemo',
  templateUrl: './ngswitchdemo.component.html',
  styleUrls: ['./ngswitchdemo.component.css']
})
export class NgswitchdemoComponent {
  public dropDownValue = "";
  SetDropDownValue(drpValue : any) {
    this.dropDownValue = drpValue.target.value;
}
}

.html Changes

<select (change)="SetDropDownValue($event)">
    <option value="">Select</option>
    <option value="In">In</option>
    <option value="US">US</option>
    <option value="UK">UK</option>
  </select>
  <h2>You Have Selected</h2>
<div [ngSwitch] = 'dropDownValue'>
  <h3 *ngSwitchCase="'In'">India</h3>
  <h3 *ngSwitchCase="'US'">United State</h3>
  <h3 *ngSwitchCase="'UK'">United Kingdom</h3>
  <h3 *ngSwitchDefault="">You have not selected any country</h3>
</div>


Output

Working with ngTemplate

Before going into more info about ngTemplate, let us understand few things. I have a requirement saying 

component[template]
       |
     <div>
       prodid: ..
       name  : ..
        ..                                 =======>repetition of UI for prod info   display
     </div>                                               |
                                                     the solution is ng template
        some content

      <div>
       prodid: ..
       name  : ..
        ..
      </div> 
         

      some content

ng-template is used to create reusable UI block (or) template with in a component

Syntax:
   <ng-template #templatename>
        UI code
   </ng-template>

*template name should be prefixed with # symbol
*ng-template can be called| referenced in 2 ways
 1.using *ngTemplateOutlet
 2.using *ngIf


 *ngTemplateOutlet is used to call ngtemplate from a tag
  syntax:
      <tagname *ngTemplateOutlet="templatename">
      </tagname>

For calling the  template we need to use ngTemplateOutlet.


Example

Create a component







Make changes to index.html as below













Make changes to appModule.ts












.ts Changes













.html changes

<ng-template #prodinfo>
    <div style="font-size:x-large;border:5px solid black;width:30%">
       prodid:p001 <br>
       name:{{prodName}} <br>
       price:50000 
   </div>
   </ng-template>
   <!--calling template-->
   <span *ngTemplateOutlet="prodinfo">
   </span>
   <h2>some content</h2>
   <span *ngTemplateOutlet="prodinfo">
   </span>
   <h2>some other content</h2>

Output






















Note:
----
*ng-container is a non rendering container tag provided by angular, this
 acts like a dummy tag, which will not be loaded into browser DOM, this
 provides better performance compare to normal html element
 [like span in the above case]

     go to ngtemplate.component.html[replace span with ng-container for better performance]















Template Calling 1 , Template Calling 2--Avoiding repetition of code.













Implicity you want to specify price , that can be done by


<ng-template #prodinfo let-price>
    <div style="font-size:x-large;border:5px solid black;width:30%">
        prodid:p001 <br>
        name:{{prodname}} <br>
        price:{{price}}
    </div>
</ng-template>
<!--calling template-->
<ng-container *ngTemplateOutlet="prodinfo;context:{$implicit:50000}">
    |
</ng-container> include
<h2>some content</h2> |
<ng-container *ngTemplateOutlet="prodinfo;context:{$implicit:40000}">
</ng-container>
<h2>some other content</h2>















From the above image, at the first step we are declaring the price- second step
we are implicitly providing price value.
























  ng-template      -->this is used to create reusable UI block
  *ngTemplateOutlet -->this is used to call template from a tag
   ng-container     -->this is a non rendering container tag