Angular 8 – Pass parameter between modals

Posted on by

I have created my own component and service to have modals windows in my App.

This is my modal component file (modal.component.ts): (I only put the methods that interest me)

// open modal
open(email?): void {
    this.email = email;
    this.element.style.display = 'block';
    document.body.classList.add('jw-modal-open');
}

getEmail(): string {
    return this.email;
}

This is my modal service file (modal.service.ts): (I only put the methods that interest me)

open(id: string, email?) {
    // open modal specified by id
    const modal = this.modals.find(x => x.id === id);
    modal.open(email);
}

getMail(id: string) {
    const modal = this.modals.find(x => x.id === id);
    return modal.getEmail(); 
}

This is my modal html file (modal.component.html):

    <div class="jw-modal">
        <div class="jw-modal-body">
<!--Here I can print the parameter that I want to send (email), if I could pass it in the "ng-content" tag it would also be useful, but I don't know if it can.-->
            <ng-content></ng-content>
        </div>
    </div>
    <div class="jw-modal-background"></div>

I need to pass a parameter from one modal to another and each modal is an angular component.

In the modal component "modal-users.componen.ts" I have a button that when I click opens another modal and I want to pass the parameter "email", This is the method of the onclick event:

openModal(id: string, email: string){
this.modalService.open("here would go the property "id" of the modal", email);
}

And this is, the modal component where I want to load the sent email "modal-detail.component.ts", I try to get it in the "OnInit" event.

// Here I try to load the email sent from the users modal component
var emailRegister = this.modalService.getMail("here would go the property "id" of the modal");

In this case, I try to retrieve the value of the parameter through a "getMail" service but it gives me an error in the console in the "modal.getEmail ()" (service method) instruction, if instead of returning "modal.getEmail ()" I directly return an email "[email protected]" works perfectly.

This is the error in console:

ModalDetailComponent.html:10 ERROR Error: formGroup expects a
FormGroup instance. Please pass one in.

Example:

<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
firstName: new FormControl()
});
at Function.missingFormException (forms.js:2263)

How can I solve it? Thanks.

Source: Angular Questions