How to create Html email template with angular material component

Question

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?

<mat-card>
  <mat-card-header>
        ...
  </mat-card-header>
  <mat-card-content>
        ...
  </mat-card-content>     
</mat-card>

Answer 1

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.