How to Render an Angular Component to HTML in Node.Js to Send Email

This article is based on the question asked on StackOverflow.

The approach is to send an Angular component-based dynamically generated templates to users’ email from the Angular SSR project.

Find the example repository at the bottom of this answer.

The steps you need to follow;

  1. Design your templates in an individual routing path that is dedicated to showing only the email templates not your navigation bars, global CSS, etc.

Example:

welcome-email-component.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-welcome-email-component',
templateUrl: './welcome-email-component.component.html',
styleUrls: ['./welcome-email-component.component.css']
})
export class WelcomeEmailComponentComponent implements OnInit {
username: any; constructor(private route: ActivatedRoute) { } ngOnInit(): void {
this.route.params.subscribe(params => {
this.username = params.username;
});
}
}

welcome-email-component.component.html

<style>
.title-p {
color: #00025a;
font-size: 20px;
font-weight: bold;
}
</style>
<p class="title-p">Welcome {{username}}</p>
{ path: 'welcome-email/:username', component: WelcomeEmailComponentComponent }
  1. Implement Angular SSR to your project from the great Angular SSR guidelines, Server-side rendering (SSR) with Angular Universal.

It’s just two lines of code.

ng add @nguniversal/express-engine
npm run dev:ssr
  1. Finally create a server-side API to generate the template from your Angular component and send emails or provide the HTML code of the single component, add the API function in your server.ts as below.

server.ts

server.get('/api/send-email/:username', (req, res) => {
// Below is the URL route for the Angular welcome mail component
request(`http://127.0.0.1:4200/welcome-email/${req.params.username}`, (error, response, body) => {
// TODO : Send email to the user from WelcomeEmailComponentComponent.ts component as `body`
// use the body to send email
res.send('Email sent');
});
});

Example code: https://github.com/aslamanver/angular-send-component-email

The demonstration of a dynamically generated component on this repository;

Finally when you access /api/send-email/:username, this will generate the welcome mail component and give the HTML body of that, thereafter you can proceed with your email sending function.

Upvote my answer in StackOverflow.

Thank you for reading✌️ I’m Aslam Anver find me on GitHub and StackOverflow as aslamanver & Googlian

Passionate in AI Deep Learning, Find me on GitHub & StackOverflow