How to Render an Angular Component to HTML in Node.Js (To Send EMails)

Question

Let's say I have a simple Angular Component:

@Component({
  selector: 'app-email-content',
  template: '<h1>Welcome {{username}}!</h1>'
})
export class WelcomeEmailComponent {
  @Input() username: string
}

My goal is to take this Angular component and render it to plain HTML with Node.Js, to send customized EMails.

I know that Server-side rendering is definitely possible with Angular Universal. But I am not sure how to explicitly render one specific component.

Answer 1

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>

You need to specify a route for this component as below, so when the user navigates to the welcome-email/username route it should show only the email template generated component.

{ path: 'welcome-email/:username', component: WelcomeEmailComponentComponent }

2. 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

3. 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.

Answer 2

I clap @Googlian's answer. But, angular produces too much unfamiliar HTML5, CSS3 and angular specific bundled features, so after that you have to remove those one by one specifically if you want a real valid email content, otherwise your email most probably will be considered as spam bu mailclients.

I sugges that you mah have a component with xHTML standarts with no-CSS3, no-experimental HTML5 features, and build an email templete with this and ElementRef, then parse required fields manually.

Send the string to serverside, nodejs, then send it as email. You can use nodemailer