Hi, I’ve sent you a mat-card

We may not be reading emails, but sending emails is still an essential part of an application. Angular, as a client side framework that uses a lot of Javascript, is not naturally a good fit to compose emails. However, it’s not impossible!

Read on to see how you can send a <mat-card /> or page made of other Angular components.

Photo by Álvaro Serrano on Unsplash

Use the below link to send yourself a <mat-card /> before jumping into the details.

Send a welcome letter made of mat-card.

How ?

In your frontend project, create a page for our new welcome email. Note, you most likely will want it to be separated with your primary frontend project. Simply create a new sub project to hold all emails and install the npm module angular-universalize-email.

Check my other article for the setup steps:

Create your email template with Angular

Write scala template for play framework

Now, add a new page and give it a routing, say for example, /email/welcome.

<!--
# This block will be removed by the process pipeline.
# At the moment only served as reminder to human.
Header: @(email: String, username: Option[String])
-->

<div class="container mt-1 nue-email">
  <div class="d-none">
    Add text here, this will be used by Gmail as preview.
  </div>

  <mat-card class="fill-x fill-t">
    <mat-card-header class="mat-primary mb-5">
      <mat-card-title class="mat-display-3">
        angular-universalize-email
      </mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <p>
        @if(username) <nue-b>
          Hi @username.get:
        </nue-b> else <nue-b>
          Hi my friend:
        </nue-b>
      </p>

      <div class="mb-3">
        <b>Add buttons</b>
        <br>

        <a href="https://github.com/sohoffice/angular-universalize-email" mat-button class="mr-1">Github</a>
        <a href="https://www.npmjs.com/package/angular-universalize-email" mat-button class="mr-1">NPM</a>
        <a href="https://sohoffice.github.io/angular-universalize-email" mat-button class="mr-1">Demo</a>
      </div>
    </mat-card-content>
  </mat-card>

</div>

As you can see, you may use some common Angular material directives, for example the mat-card, mat-button or mat-toolbar. When you have to use braces, use the nue-extension tags. See the project document for other extension tags you may use.

It should work with other server side technology. If you have the need, please contact me and we can see how to make it work.

Include styles

Add the below to your styles.scss (of the email application)

/* angular-universalize-email styles */
@import "~angular-universalize-email/styles.css";

The styles won’t do much for you, but it can get you started.

Check your email in browser

Just spin up your test server with ng serve --ssl --project email. Go to https://localhost:4200/email/welcome to see how it looks.

Build the email application

ng build --extract-css --project email && ng run email:server

After this step, you should have dist/email and dist/email-server folder.

Generate the template

./node_modules/.bin/angular-universalize-email \
  -a ./dist/email \
  -A ./dist/email-server \
  -o ../my-server/frontend/app/views/emails \
  -p '{camel}.scala.html' \
  --prepend '@(email: String, username: Option[String])' \
  "/email/welcome"

Invoke angular-universalize-email with these information:

• Browser assets: ./dist/email
• Server assets: ./dist/email-server
• Output path: ../my-server/frontend/app/views/emails
• Output filename pattern: In this case, the output will be emailWelcome.scala.html.
• Prepend a line in the beginning of the output
• The URL is /email/welcome

You should now have an emailWelcome.scala.html at your disposal in your play framework application.

Best practices

• Use template engine. This saves can you a lot of time. If you’re using node, you may try Mustache.
• Send email through your server with data fields as parameters. Do not send the entire mail body from your Angular client. If you’re serverless, use mail provider like Amazon SES. (but you wouldn’t need this guide)
• Use capitalized sender name. I find sender in all lower case letters is not clear enough to bring attention.
• Use concise email subject. Put the important part in the front. Your subject may be truncated, depending on the screen size. (Think about cell phones.)

Conclusion

The email may not look 100% the same. As a lot of CSS styles were not accepted by Gmail. For example: box-shadow, position, negative margins. I also can’t get media queries to work. But I like how it turns out. Especially when it allows me to continue to use a single frontend technology for emails.

Did you learn something new? If so please:

↓ clap 👏 button below️ so more people can see this