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

  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.
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;
});
}
}
<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.
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.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');
});
});

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store