Sending data from one component to another in Angular (CLOSED)

I am currently trying to send data (a simple string that I got in a variable) from one component to another. Usually, I would use an EventEmitter but in my case it wouldn't work (or so I believe after trying it out!). This is due to the fact that the component that originally holds the data is not called on html using the tag. It is implemented in another way: by calling the class!

This is what you need from my code :

The first component which holds the email string value

  export class EditEmailCaliComponent {
    @Output('caliConfirmationEmail')email = new EventEmitter<string>();

    form: FormGroup = new FormGroup({
      emailAddress: new FormControl(''),
    });

    constructor(public dialogRef: MatDialogRef<EditEmailCaliComponent>, @Inject(MAT_DIALOG_DATA) public data: boolean) {}

    saveEmail(){
      this.email.emit(this.form.controls.emailAddress.value);
      console.log('email is ' + this.form.controls.emailAddress.value);
    }
  }

The second component. I am trying to use the trySave() method in order to output the email to the console

  export class CaliDialogComponent implements OnInit {

  name = '';
  scannerList: string[] = [];
  displayedColumns: string[] = ['scanners'];
  usedEmail: string[] = [];
  displayedColumns2: string[] = ['email'];

  constructor(public dialogRef: MatDialogRef<CaliDialogComponent>,
              @Inject(MAT_DIALOG_DATA) public data: boolean,
              private userService: UserService,
              private dialog: MatDialog) {
    this.data = true;
  }

  ngOnInit(): void {
    this.loadCali();
    this.loadEmail();
  }

  loadCali(): void {
    this.userService.loadCali().subscribe((table) => {
      this.scannerList = table;
    });
  }

  loadEmail(): void {
    this.userService.getEmail().subscribe((answer) => {
      this.usedEmail = [];
      this.usedEmail.push(answer.response);
    });
  }

  onNoClick(): void {
    this.data = false;
    this.dialogRef.close();
  }

  editCali(element: string): void {
    const dialogRef = this.dialog.open(EditCaliDialogComponent, {
      width: '250px',
    });

    dialogRef.componentInstance.form.patchValue({
      scannerName: element,
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result !== element && result !== undefined && result !== '') {
        this.userService.updateCali(element, result).subscribe(() => {
          this.loadCali();
        });
      }
    });
  }
  editEmail(element: string): void {
    const dialogRef = this.dialog.open(EditEmailCaliComponent, {
      width: '250px',
    });

    dialogRef.componentInstance.form.patchValue({
      emailAddress: element,
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result !== element && result !== undefined && result !== '') {
        // this.userService.updateEmail(element, result).subscribe(() => { // Update the email address stored on the database.
        //    // Send the value to the modified one and send it to server...
        // });
      }
    });
  }

  createCali(): void {
    if (this.name === '') { return; }
    this.userService.createCali(this.name).subscribe(() => {});
  }

  trySave(email): void{
    console.log('email is + ' + email.this.form.controls.emailAddress.value);
  }

  deleteCali(element: string): void {
    const dialogRef = this.dialog.open(DeleteDialogComponent, {
      width: '250px',
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        this.userService.deleteCali(element).subscribe(() => {
          this.loadCali();
        });
      }
    });
  }
}

The Html part for the email box

<table mat-table [dataSource]="usedEmail" class="mat-elevation-z8 tabElement">
    <app-edit-email-cali (caliConfirmationEmail)="trySave($event)"></app-edit-email-cali>

    <ng-container matColumnDef="email">
          <th mat-header-cell *matHeaderCellDef>Receiving Email</th>
          <td mat-cell *matCellDef="let element
  ">
              <span class="floatLeft">{{element}}</span>
              <button mat-icon-button title="Edit" (click)="editEmail(element)" class="btn">
                  <mat-icon color="primary">edit</mat-icon>
              </button>
          </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns2"></tr>
      <tr
          mat-row
          *matRowDef="let row; columns: displayedColumns2;"
      ></tr>
  </table>

If you need anything else, I will be happy to provide it!

UPDATE --> FIXED I got it working, thank you everyone!