Div not getting displayed using *ngIf

Question

I am new to Angular 4 and trying to display a different set of textboxes based on the selection of a dropdown. However, the divs are not getting displayed to the UI . Kindly help. Below is my html as well as typescript file.

Session.html

<form #sessionForm="ngForm" (ngSubmit)="insertSession(sessionForm); sessionForm.reset();"> 
    <div class="form-group row">
        <label for="deliveryMethod" class="form-col-label col-sm-2">Mode</label>
        <div class="col-sm-6">
            <select>
                <option *ngFor="let item of dms" (click)="setNav(item)">{{item}}</option>
            </select>
        </div>
    </div>

<div  *ngIf="isSelectedmode('Physical'); then PhysicalBlock"></div>
<ng-template #PhysicalBlock>
    <div class="form-group row">
        <label for="deliveryVenue" class="form-col-label col-sm-2">Venue</label> 
        <input type="text" class="form-control col-sm-6" id="deliveryMethodDetails" name="venue" [(ngModel)]="newSession.venue" #venue="ngModel">
    </div>     
</ng-template>

<div *ngIf="isSelectedmode('VCR'); then thenBlock"></div>
<ng-template #thenBlock>
    <div class="form-group row">
        <label for="callDetails" class="form-col-label col-sm-3">Call details</label> 
        <input type="text" class="form-control col-sm-5" id="callDetails" name="callDetails" [(ngModel)]="newSession.callDetails" #callDetails="ngModel">
    </div>
    <div class="form-group row">
        <label for="participantCode" class="form-col-label col-sm-3">Particpant Code</label> 
        <input type="text" class="form-control col-sm-6" id="participantCode" name="participantCode" [(ngModel)]="newSession.participantCode" #participantCode="ngModel">
    </div>
    <div class="form-group row">
        <label for="webexLink" class="form-col-label col-sm-3">Webex Link</label> 
        <input type="text" class="form-control col-sm-6" id="webexLink" name="webexLink" [(ngModel)]="newSession.webexLink" #webexLink="ngModel">
    </div>
</ng-template>

Session.ts

export class SessionComponent implements OnInit {
  constructor(
    private dataService:DataService) {} 

  ngOnInit() {}

  dms =['Physical','VCR']
  selectedNav: any

  setNav(nav:any){
    this.selectedNav = nav;
    if(this.selectedNav == "Physical"){
      this.regTypeSelectedOption = "Physical";}
    else if(this.selectedNav == "VCR"){
      this.regTypeSelectedOption = "VCR";
    }
  }

  isSelectedmode(name:string){
    if(!this.regTypeSelectedOption){return false;}
    else {return name===this.regTypeSelectedOption;}
  }
}

Answer 1

declare template variable and add the change event at the select tag and pass the template variable as parameter

session.html

<div class="form-group row">
  <label for="deliveryMethod" class="form-col-label col-sm-2">Mode</label>
<div class="col-sm-6">
  <select #s (change)="setNav(s.value)" >
<op tion *ngFor="let item of dms" >{{item}}</option>
 </select>
</div>