html - Populate input using @Input inside Bootstrap 4 modal -

i have main page table when row clicked on, uses @output send out row's data (i've confirmed data being sent using in place in project). have bootstrap 4 modal pops when click button on left below says "data point information". need take data row clicked on, , populate form inside modal it.

main page:

modal:

html modal:

<div class="modal fade" id="mymodal2" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-dialog bodywidth"> <div class="modal-content wide">   <div class="modal-header">     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>     <h4 class="modal-title">update data point</h4>   </div>   <div class="modal-body">     <form class="form-inline" [formgroup]="updateform" (ngsubmit)="submitform(updateform.value)">       <div class="row">         <div class="form-group" [ngclass]="{'has-error':!updateform.controls['datapoint'].valid && updateform.controls['datapoint'].touched}">           <label>data point:</label>           <input class="form-control special" type="text" [formcontrol]="updateform.controls['datapoint']">         </div>         <div class="form-group move" [ngclass]="{'has-error':!updateform.controls['iccp'].valid && updateform.controls['iccp'].touched}">           <label >iccp:</label>           <input type="text" class="form-control special" [formcontrol]="updateform.controls['iccp']">         </div>         <div class="form-group" [ngclass]="{'has-error':!updateform.controls['startdate'].valid && updateform.controls['startdate'].touched}">           <label>start date:</label>           <input [value]="getdate('start')" class="form-control special" type="text" [formcontrol]="updateform.controls['startdate']" style="margin-right: 4px;">         </div>         <div style="display:inline-block">           <ngb-datepicker id="special" *ngif="startcheck;" [(ngmodel)]="startdate" (ngmodelchange)="showdatepick(0)" [ngmodeloptions]="{standalone: true}"></ngb-datepicker>         </div>         <button type="button" class="btn icon-calendar closest" (click)="showdatepick(0)"></button>         <div class="form-group" [ngclass]="{'has-error':!updateform.controls['enddate'].valid && updateform.controls['enddate'].touched}">           <label >end date:</label>           <input [value]="getdate('end')" class="form-control special" type="text" [formcontrol]="updateform.controls['enddate']">         </div>         <div style="display:inline-block">           <ngb-datepicker id="special" *ngif="endcheck;" [(ngmodel)]="enddate" (ngmodelchange)="showdatepick(1)" [ngmodeloptions]="{standalone: true}"></ngb-datepicker>         </div>         <button type="button" class="btn icon-calendar closer" (click)="showdatepick(1)"></button>       </div>     </form>   </div>   <div class="modal-footer">     *all fields required. end date must after start date     <button type="submit" class="btn" [disabled]="!updateform.valid" data-dismiss="modal">update</button>     <button type="button" (click)="resetform()" class="btn" data-dismiss="modal">cancel</button>   </div> </div> </div> </div> 

typescript modal:

@component({   selector: 'update-validation',   styleurls: ['../app.component.css'],   templateurl: 'update.component.html',   providers: [datepipe] }) export class updatecomponent {   @input() receivedrow:datatable;   public dt: ngbdatestruct;   public dt2: ngbdatestruct;   public startcheck: boolean = false;   public endcheck: boolean = false;   updateform : formgroup;   constructor(fb: formbuilder, private datepipe: datepipe){    this.updateform = fb.group({     'datapoint' : [dps[0].tdatapoint, validators.required],     'iccp' : [dps[0].ticcp, validators.required],     'startdate' : [dps[0].tstartdate, validators.required],     'enddate' : [dps[0].tenddate, validators.required]  }, {validator: this.enddateafterorequalvalidator})  }  resetform(){   location.reload();   //this.updateform.reset(); }  submitform(value: any){   console.log(value); }  public getdate(datename: string) {   let workingdatename = datename + 'date';   let timestamp = this[workingdatename] != null ? new date(this[workingdatename].year, this[workingdatename].month-1, this[workingdatename].day).gettime() : new date().gettime();   this.updateform.controls[datename + 'date'].setvalue(this.datepipe.transform(timestamp, 'mm/dd/yyyy')); }  public showdatepick(selector):void {   if(selector === 0) {     this.startcheck = !this.startcheck   } else {     this.endcheck = !this.endcheck;   } }  enddateafterorequalvalidator(formgroup): {   var startdatetimestamp, enddatetimestamp;   for(var controlname in formgroup.controls) {     if (controlname.indexof("startdate") !== -1) {       startdatetimestamp = date.parse(formgroup.controls[controlname].value);     }     if (controlname.indexof("enddate") !== -1) {       enddatetimestamp = date.parse(formgroup.controls[controlname].value);     }   }   return (enddatetimestamp < startdatetimestamp) ? { enddatelessthanstartdate: true } : null;   } } 

html main page places modal there using it's selector (tosend of type datatable data row sending main page's typescript):

<update-validation [receivedrow]='tosend'></update-validation> 

since i'm using @output , @input, i'm not sure why receivedrow in typescript undefined.

the reason when component of modal initialized, there not receivedrow. should control *ngif directive , ngonchange method that;

//xyz field on parent component  //in html <div *ngif="xyz">      <update-validation [receivedrow]="xyz"></update-validation> </div>  //in component of modal ngonchanges(){      if(receivedrow){           //do whatever want      } }