As a newcomer to Angular, I am currently grappling with the concept of dynamic components within my project. Specifically, I am working on implementing functionality where a user can select a row in a component and then click a button to open a modal (contained within EmailModalComponent). This modal includes fields for email address, subject line, and email content. The goal is to populate these fields, trigger a function within the definition component from EmailModalComponent (via a button within the modal), and ultimately send an email with a PDF attachment containing information related to the previously selected row.
To facilitate this process, I have developed a service that opens the email modal from the definition component and utilized an event emitter to transmit data between the modal and the definition component. While the overall solution works smoothly, a persistent issue arises wherein the email modal remains visible in the definition component due to event listener implementation in the template.
EmailComponent.ts
export class EmailModalComponent implements OnInit {
@Output() emailEvent = new EventEmitter();
sendWithEvent(){
this.emailEvent.emit({mail:this.emailTosend});
console.log ("Sending event ... ", this.emailTosend)
}
Definition Component.ts
// Function responsible for sending the email (functional)
sendEmail($event) {
let selectedRows = this.gridOptions.api.getSelectedRows();
let id = selectedRows[0][Object.keys(selectedRows[0])[0]];
var url = "/shared/emailModal/sendEmail";
var filename;
this.definitionHttpService.exportPdf(this.serverUrl, id).takeUntil(this.unsubscribe).subscribe(
data => {
let formData = new FormData();
// PDF Attachment section
let mediaType = 'application/pdf';
let blob = new Blob([data], {type: mediaType});
filename = this.serverUrl.substr(1) + ".pdf";
let emailAttachment = new File([blob], filename, {type: mediaType, lastModified: Date.now()});
formData.append('pdfFile', emailAttachment);
// Email section
let email = $event.mail;
let emailToSend = new Blob([JSON.stringify(email)], {type: 'application/json'});
formData.append('mail',emailToSend);
this.definitionHttpService.sendEmailAttach(url, formData).takeUntil(this.unsubscribe).subscribe();
});
}
Definition Component.html
<app-email-modal (emailEvent)='sendEmail($event)'></app-email-modal>
// Note: The current setup displays the email modal by default, but ideally, the modal should only appear upon clicking a specific button.
In Definition Component
In the emailModal Component