Empty Input Shown in Create Page-CodePudding

This is CRUD based SPA application. I m trying to pass Employee's Single Record from Edit Component to Create Component . Because user need to edit data. But it doesn't work. Empty String passed to Create Component. I added some hard corded values. then it works without having any issue. Please help me to resolve this incident.

edit.component.ts


@Component({
  selector: 'app-edit',
 .....
})
export class EditComponent implements OnInit {

  emp_no: number = 0;
  empSingleRecord: any = "";

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private requestHandlerService: RequestHandlerService) {
  }

  ngOnInit(): void {
    this.emp_no = this.route.snapshot.params['id'];
    this.loadSingleEmploymentData();

  }



  loadSingleEmploymentData() {
    this.requestHandlerService.getRequest('emp/'   this.emp_no).subscribe({
      next: (resultData: any) => {

        this.empSingleRecord = resultData.data;

      },
      error: (errorData: any) => {
        console.log(errorData);
      },

    });
  }


}

edit-component.html

<app-create employeeFromEdit="{{empSingleRecord}}"></app-create>

create.component.ts


@Component({
  selector: 'app-create',
....
})
export class CreateComponent implements OnInit {


  @Input('employeeFromEdit') public employee: any = {
    emp_no: "",
    birth_date: "",
    first_name: "",
    last_name: "",
    gender: "",
    hire_date: "",
    salaries: [{
      salary: "",
      from_date: "",
      to_date: "",
    }],
    designations: [{
      title: '',
      from_date: '',
      to_date: '',
    }]


  };

  constructor() {
  }

  ngOnInit(): void {
    console.log(this.employee)
  }

CodePudding user response：

The problem of passing from father to son

<app-create [employeeFromEdit]="empSingleRecord"></app-create>

create.component.ts

import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';

@Input() 
set employeeFromEdit(val){
 console.log(val)
}