Angular 8 – Pass parameter between modals

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 { = email; = 'block';

getEmail(): string {

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 => === id);;

getMail(id: string) {
    const modal = this.modals.find(x => === 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.-->
    <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){"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.


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

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