title: How to display emails in an angular app like it gets displayed in an email client
body: <p>I am currently trying to develop a web app to display EMails to the user. It is important for me that the emails get displayed like they get in an email client (e.g. gmail).
  I use the gmail api to import emails to my database then I get the messageparts from the emails into my angular app.
  The problem is that I am not able to display html emails with the propert styling. It seems like html tags get used correclty but the original styling seems to be lost</p>
  
  <p>I am using angular 7, and spring boot. To collect the Emails I use the gmail api and import them into a postgresql database. I tried to use iframes so my app styling doesn't get in the way of the email styling but it gets displayed the same way.</p>
  
  <p>How I prepare the emails</p>
  
  <pre class="lang-java prettyprint-override"><code>private String getMessageContent(Message message) {
          StringBuilder stringBuilder = new StringBuilder();
          try {
              if(message.getPayload().getParts() != null) {
                  handleEmailMainContent(message.getPayload().getParts(), stringBuilder);
                  byte[] bodyBytes = Base64.decodeBase64(stringBuilder.toString());
                  return new String(bodyBytes, "UTF-8");
              } else {
                  return "";
              }
          } catch (UnsupportedEncodingException e) {
             System.out.println("UnsupportedEncoding: " + e.toString());
              return message.getSnippet();
          }
      }
  
      private void handleEmailMainContent(List&lt;MessagePart&gt; messageParts, StringBuilder stringBuilder) {
          for (MessagePart messagePart : messageParts) {
              switch (messagePart.getMimeType()) {
                  case "text/plain":
                      handleMimeTypeTextPlain(messagePart, stringBuilder);
                      break;
                  case "text/html":
                      handleMimeTypeTextHtml(messagePart, stringBuilder);
                      break;
                  default:
                      break;
              }
          }
      }
  </code></pre>
  
  <p>Note: selectedEmail.mainContent is the String I build above</p>
  
  <h3>Example</h3>
  
  <p>The content inside mainContent are phishing emails I try to collect and display. The example is a html email I try to display.
  I ommited  the links and most of the spam content. </p>
  
  <p>---------- Forwarded message ---------
  Von: emailaddress
  Date: Fr., 10. Mai 2019 um 22:06 Uhr
  Subject: Name, Give mom the gifts she wants
  To: emailaddress</p>
  
  <p>image
  Become part of the Heally family on <em>Facebook</em>
  link
  !
  - LET'S TALK
  Celebraing Mom
  <em>...</em>
  Moms run the world. They literally give us life, take on one of the hardest
  roles, and do it all without an end to their workday or any time off. While
  moms deserve to be celebrated year-round, Mother’s Day is a special time to
  make sure they know they’re loved and appreciated.
  LEARN MORE
  link</p>
  
  <p>Looking for CBD only Products?
  PROMO CODE: <em>SAVECBD20</em>
  link
  CBD 20% OFF
  link
  Give mom gifts that she actually wants.
  Shop the Marketplace</p>
  
  <p>-ommited SPAM-</p>
  
  <p>You are receiving this email because you or your medical provider have
  registered for a Heally account.
  Unsubscribe
  link
  Copyright (C) 2019 Heally Inc. All rights reserved.
  Unsubscribe</p>
  
  <h3>own Example</h3>
  
  <p>I tried to send a minimalistic html email to myself containing this content:</p>
  
  <pre class="lang-html prettyprint-override"><code>*dummy*
  &lt;div dir="ltr"&gt;&lt;i&gt;dummy&lt;/i&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and it worked just fine. Maybe the problem is an external class which does not get displayed/loaded and/or not exported by the gmail api</p>
  
  <h3>How I tried to display it</h3>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-card&gt;
    &lt;mat-card-title&gt;
      Current Email
    &lt;/mat-card-title&gt;
    &lt;mat-card-content [innerHTML]="selectedEmail.mainContent"&gt;
    &lt;/mat-card-content&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>I want to display emails like they get displayed in gmail instead I was only able to display plain text and basic styling through html tags.
  I don't understand at which of my steps the styling gets lost or if I do not correctly display the emails.</p>