<ng-container *ngTemplateOutlet="editMode == 'V' ?  displayTemplate : interactiveTemplate" >
</ng-container>



<ng-template #displayTemplate>
<div class="user-all-info">
<div class="user-name-info"> 
    <span class="name-info" >Name</span>
	<span class="user-full-name">{{profileData?.firstName}} {{profileData?.lastName}}</span>
</div>
<div class="user-email-info">
  <span class="email-id-info">Email ID</span>
  <span class="email-span">{{profileData?.emailId}} </span>
</div>
<div class="user-mobile-number-info">
  <span class="number-info">Mobile Number</span>
  <span class="phone-span">{{profileData?.contactNo}} </span>
</div>
<div class="user-dob-info">
  <span class="dob-info">Date of Birth</span>
  <span class="dob-span">{{profileData?.birthDate}}</span>
</div>
<div class="user-gender-info">
  <span class="gender-info">Gender</span>
  <span class="gender-span">{{ ( profileData?.gender == 'M' ) ? 'Male' : 'Female' }} </span>
</div>
</div>
</ng-template>


<ng-template #interactiveTemplate>
 
  <div class="row totalProfile">
 	  <form #userProfile="ngForm">
		  <div class="small-6 medium-6 large-4 columns">
			   <bb-textbox  [required]="true" [placeholder]="'First Name'" [(ngModel)]="profileData.firstName" name= "firstName"></bb-textbox>
		  </div>
		  
		  <div class="small-6  medium-6 large-4 columns">
		       <bb-textbox [required]="true" [placeholder]="'Last Name'" [(ngModel)]="profileData.lastName" name= "lastName"></bb-textbox>
		  </div>
		  
		  <div class="small-12 medium-12 large-4 columns">
		   		<bb-email [placeholder]="'Email ID'" [required]="true"  validator="true" [invalidMessage]="'Please enter valid email'" [requiredMessage]="'Email cannot be blank'" [(ngModel)]="profileData.emailId" name= "emailId"></bb-email>
		  </div>
		
		  <div class="small-6 medium-6 large-4 columns">
			   <bb-textbox [required]="true" [placeholder]="'Mobile Number'" [(ngModel)]="profileData.contactNo" name= "contactNo"></bb-textbox>
		  </div>
		  <div class="small-6 medium-6 large-4 columns">
		  		<md-input-container>
		  			 <input mdInput [(ngModel)]="profileData.birthDate" name= "birthDate"
			        [placeholder]="'Date of Birth'"
			        (click)="birthDatePicker.open();" />
			        
			        <input type="hidden" [(ngModel)]="birthDate" name= "hiddenDob"
			        [mdDatepicker]="birthDatePicker" />
				    <md-datepicker #birthDatePicker></md-datepicker>
			    </md-input-container>
		  </div>
		  
		  <div class="small-12 medium-12 large-4 columns">
			  <span class="user-gender">Gender</span>
			  <md-radio-group class="gender" [(ngModel)]="profileData.gender" name= "gender" style="display: block;">
			  <md-radio-button  class="male-user"  value="M">Male</md-radio-button>
			  <md-radio-button class="female-user"  value="F" >Female</md-radio-button>
			  </md-radio-group>
		  </div>
	  </form>
  </div>
</ng-template>   




