angularinputtransfer

Mdbmodalservice - Value isn't being passed from parent to modalchild


I know their are similar topics, but to my idea I do everything right. Also, I've done this already the same way in other parts of my project and it works fine. But in this case, my value doesn't get passed from parent to childcomponent. The value being passed is a number (from an id). The console logs in the parent component confirm that the id is present in the parent before sending.

parent component

export class AddConsignatiebonComponent implements OnInit {
      modalRef: MdbModalRef<SigningPadComponent> | null = null;

        constructor(private modalService: MdbModalService) { }

        async ngOnInit(): Promise<void> {
        // irrelevant methods
        }

     async consignatieBonToevoegenEnTekenen(){
        console.log("consignatieBonToevoegenEnTekenen reached");
        const passingID = await this.consignatieBonToevoegen();
        console.log(passingID);

        this.modalRef = this.modalService.open(SigningPadComponent,
           {data: {passingID}, modalClass: 'modal-xl'});
      
         async consignatieBonToevoegen():Promise<number> {
           //function that returns the id
             }
  }
  
}

child component

export class SigningPadComponent implements OnInit {

  @Input() data: string | undefined;   //tried this one
  passingId: number | null = null;  // and this one, both give undefined
  id!:number;

  constructor(public modalRef: MdbModalRef<SigningPadComponent>) {}

  ngOnInit(): void {
    //this.id=this.passingId?
    console.log("passingId: " + this.passingId);
   console.log("data: " + this.data);
  }

// other irrelevant functions

}

Can someone explain me why the id isn't getting transferred in my particular situation to the child component? In all my other code, it works just fine with the objects I transfer, but not with this number.


Solution

  • I made a typo. In my childComponent I wrote passingdId instead of passingID.