As a newcomer to Angular, I am currently working with Angular 7. Within our project, we have implemented a button component labeled as "Send Email." When this button is clicked on the webpage where it is displayed, it triggers the default email sending window (such as Outlook or Gmail) enabling users to compose and send emails.
My current challenge involves obtaining a reference to the opened email dialog/window in order to track whether the email was successfully sent or cancelled. Additionally, I am looking to retrieve information about the recipient and subject line of the email. It seems that the type of my nativeElement is "<a>".
I have attempted to implement 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 access the handle of the native email dialog and fetch the necessary fields for retrieving information?
Code snippets:
1> EmailLinkComponent.ts :
Note:
@ViewChild("sendEmail") sendEmailButton: ElementRef<HTMLAnchorElement>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 modifying it as follows (which 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> This component can be used in parent HTML as shown below:
<lib-email-link #emailLink [pageContext]="PageEnum.context">
</lib-email-link>