2

How to create html email body by using angular material components.

Since the component tags are not rendering. for example simple angular material card as follows. Is there any way to do so?

enter image description here

<mat-card>
  <mat-card-header>
        ...
  </mat-card-header>
  <mat-card-content>
        ...
  </mat-card-content>     
</mat-card>
Rahul Uttarkar
  • 3,367
  • 3
  • 35
  • 40

4 Answers4

7

I guess you are sending the template using something like JavaMail and expecting it to render in the mail boxes like Gmail or mail clients like Outlook.

If so, this will not work. Angular Material is supposed to work with Angular only while mail boxes and clients render native HTML elements and hence, have no idea what <mat-card> means since it is a custom element and not a native element like <div>.

You can generate the template using other CSS libraries based on Material Design e.g Material Design Lite which uses normal CSS classes to achieve similar UI and send it as HTML email. Then it will render properly in all the clients and Mail boxes.

rvkant
  • 180
  • 1
  • 5
3

For email template, you can't use any angular material component as they all will be unknown to them when you try to render them.

If you want to create an email template you need to do that purely using HTML, inline CSS and table element like tr, td.

Wasif
  • 183
  • 2
  • 3
  • 14
  • I agree but there its more time consuming ( converting material css and in lining each) There should has to be a better way. – Rahul Uttarkar Aug 26 '18 at 04:16
2

Angular is a pseudo-language. It means that Angular uses other languages (javascript). It can be considered as a sort of library on top of javascript.

Angular components-tags are pseudo HTML tags that are replaced by Angular by the HTML template of that component, modified by the javascript-code from that component.

If you ask if Angular components can be rendered in an e-mail HTML body, then you first need to ask if javascript can be rendered in an e-mail. This and this answer explain a bit more why javascript is not rendered by e-mail programs.

Angular seems to make a web application a lot easier to write and maintain. An as for web applications and high-responsive websites is this right. But creating a small 5 page website will be faster with an other technology (like .NET MVC, PHP,...). You will not use a hammer to saw.

A fast way to create e-mail with repeating HTML-code is in .NET MVC. This question is about rendering a view to a HTML string (which can be used as e-mail body).

Stef Geysels
  • 1,023
  • 11
  • 27
1

I just wrote some articles (article 1, article 2) to talk about how you can develop email templates with Angular.

A command line utility angular-universalize-email was added, it can be installed via npm install angular-universalize-email --save-dev.

A demo page can be found here.

The module is brand new, and I'm pretty sure there're tons of issues. But I love to hear back from you and the world.

Douglas Liu
  • 1,592
  • 17
  • 11