CODEWITHSUNDEEP
angulartypescript
VictorGram
VictorGram

Reputation: 2661

Get handle of child of nativeElement

I am new to angular, and we are using angular 7. We have a button component, labeled as "Send Email" and when we click the button from the webpages where it is rendered, it opens up the default emailing window (example outlook/gmail etc) from where we can send an email.

My problem is I need a handle of the opened up emailing dialog/window to determine if the email was sent or was cancelled. Additionally, if I can retrieve info on to whom it was sent to and what was the subject line. Looks like my nativeElement's type is "< a>".

Something similar code like :

aDialog= this.dialog.open(aDialogComponent, dialogConfig);
aDialog.afterClosed().subscribe((data: EmailInfo) => {
  if (! data) {
    // cancel button was clicked
    return;
  }
   this.to = data.to;
   this.from = data.from;
   this.subject = data.subject

   //Now log 
  });
});

Is there a way to get the handle of that native email-dialog and the fields that I need to retrieve info from?

Code snippets :

1> email.link.component.ts :

notice : @ViewChild("sendEmail") sendEmailButton: ElementRef<HTMLAnchorElement> and Onclick method

@Component({
  selector: "lib-email-link",
  templateUrl: "./email.link.component.html",
  styleUrls: ["./email.link.component.scss"]
})
export class EmailLinkComponent extends BaseComponent {
  private email: Email;
  @Input() from = "";
  @Input() to = "";
  @Input() tooltip = `Send email from this context (opens in default email client)`;
  @Input() pageContext: EmailPageContext = undefined;
  @ViewChild("sendEmail") sendEmailButton: ElementRef<HTMLAnchorElement>;
  mailToLink = "";

  constructor(private emailService: EmailService) {
    super();
  }


  onClick(): void {
    if (this.sendEmailButton) {
      this.sendEmailButton.nativeElement.click();
    }
  }
}

I tried by modifying as (did not work):

onClick(): void {
    if (this.sendEmailButton) {
      this.sendEmailButton.nativeElement.addEventListener("close", (data: any) => {
        console.log("========>" + JSON.stringify(data));
      });
      this.sendEmailButton.nativeElement.click();
    }
  }

2> email.link.component.html

<span>
  <!-- Default "Send Email" button -->
  <button
    type="button" class="default-content btn-with-right-icon"
    mat-stroked-button color="accent"
    [matTooltip]="tooltip" matTooltipPosition="after" matTooltipShowDelay="1000"
    (click)="onClick()">
    Send Email
    <mat-icon>launch</mat-icon>
  </button>
</span>
<a #sendEmail style="display: none;" [href]="mailToLink"> </a>

3>It's been used as (in parent html):

<lib-email-link #emailLink [pageContext]="PageEnum.context">
</lib-email-link>

Upvotes: 0

Views: 613

Answers (1)

Luiz Avila
Luiz Avila

Reputation: 1366

Edit: New Answer

Ok, rereading what you actually want, the answer is basically you can't. There is no way to know if the e-mail was actually sent from the code. Unless you write the dialog yourself and send the email yourself.

Imagine what could happen if a site had access to the desktop outlook application. It could send e-mails in your name, read your inbox, etc.

you can read more about it here https://javascript.info/intro#what-can-t-in-browser-javascript-do

You can however log the to, from and subject that was sent to the mail client (but there is no guarantee that even that is going to be used)

Old Answer

Why do you need the button and the link?

Can't you just do something like:

<a #sendEmail (click)="doClickStuff()" [href]="mailToLink" class="default-content btn-with-right-icon"> Send Email
<mat-icon>launch</mat-icon></a>

This is my example running it:

https://stackblitz.com/edit/angular-ivy-bytp4h

Upvotes: 1

Related Questions