title: How to Display the Template instead of the Code of the Template?
body: <p>The problem is that I get a display like bunch of codes(look to the image) in the Card and my purpose is to display the template not the code of the template
  PS: if I get that code storing in DB and put it manual in the card it works.
  Please any ideas or help?.</p>
  <p><a href="https://i.stack.imgur.com/4KvDf.png" rel="nofollow noreferrer">Display</a></p>
  <p>App.component.ts</p>
  <pre><code>import { Component, ViewChild} from '@angular/core';
  import { EmailEditorComponent } from 'angular-email-editor';
  import { SenderService } from &quot;../app/sender.service&quot;;
  import  sample from './sample.json';
  import { TemplateCard } from &quot;src/app/template&quot;;
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    public templates:TemplateCard[];
    public model: any;
    options = {
    };
    gridColumns = 3;
  
    toggleGridColumns() {
      this.gridColumns = this.gridColumns === 3 ? 4 : 3;
    }
  
    constructor(public http:SenderService) { }
  
    ngOnInit() {
    }
  
    @ViewChild('editor')
    private emailEditor: EmailEditorComponent = new EmailEditorComponent;
  
    GetDataTemplate(){
     
      this.model=this.http.getEmail(&quot;http://localhost:3000/savetemplate&quot;).subscribe( data =&gt; {
            this.templates=data;
            console.log(this.templates);  // this is where the problem appears
           },
           err =&gt; console.error(err),
           () =&gt; console.log('template completed')
           );
  }
      
  
    editorLoaded() {
      this.emailEditor.editor.loadDesign(sample
      );
    }
  </code></pre>
  <p>//App.component.html</p>
  <pre><code>&lt;div class=&quot;content&quot;  &gt;
    &lt;div fxLayout=&quot;&quot; fxLayoutGap=&quot;10px grid&quot; &gt;
      &lt;div [fxFlex]=&quot;(100/gridColumns) + '%'&quot; fxFlex.xs=&quot;100%&quot; fxFlex.sm=&quot;33%&quot;  &gt;
        &lt;mat-card class=&quot;mat-elevation-z4 info&quot; &gt;
          &lt;mat-card-content *ngFor=&quot;let item of templates&quot; &gt;     
                 &lt;!-- partie Html will be set here  to fit  --&gt;
                 
                  {{item.templatebody}}
                
        &lt;/mat-card-content&gt;
        
      &lt;/mat-card&gt;
  &lt;/div&gt;
  &lt;mat-card class=&quot;mat-elevation-z4 info&quot;&gt;
    &lt;mat-card-content &gt;     
           &lt;!-- partie Html will be set here  to fit  --&gt;
  
  &lt;/mat-card-content&gt;
  
  &lt;/mat-card&gt;
  &lt;mat-card class=&quot;mat-elevation-z4 info&quot;&gt;
    &lt;mat-card-content &gt;     
           &lt;!-- partie Html will be set here  to fit  --&gt;
  
  &lt;/mat-card-content&gt;
  
  &lt;/mat-card&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>