Q:

Populate input using @Input inside Bootstrap 4 modal

I have a main page with a table that when a row is clicked on, it uses @Output to send out that row's data (I've already confirmed the data is being sent properly by using it in another place in the project). I then have a Bootstrap 4 modal that pops up when I click the button on the left below where it says "Data Point Information". What I need to do is take the data from the row that was clicked on, and populate the form inside the modal with it. 
Main Page:
Modal:
HTML for the 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 Are Required. End Date must be 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 for the 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): any {
  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 from the main page that places modal there using it's selector (toSend is of type DataTable which is the data from the row I am sending from the main page's Typescript):
<update-validation [receivedRow]='toSend'></update-validation>

Since I'm using @Output and @Input, I'm not sure why receivedRow in my Typescript is undefined.

A:

The reason is that when your component of modal initialized, there were not any receivedRow. You should control it with *ngIf directive and ngOnChange method like that;
//xyz is just any field on your parent component

//in html
<div *ngIf="xyz">
     <update-validation [receivedRow]="xyz"></update-validation>
</div>

//in component of modal
ngOnChanges(){
     if(receivedRow){
          //do whatever you want
     }
}

