How to Display the Template instead of the Code of the Template?

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?.

Display

App.component.ts

import { Component, ViewChild} from '@angular/core';
import { EmailEditorComponent } from 'angular-email-editor';
import { SenderService } from "../app/sender.service";
import  sample from './sample.json';
import { TemplateCard } from "src/app/template";

@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("http://localhost:3000/savetemplate").subscribe( data => {
          this.templates=data;
          console.log(this.templates);  // this is where the problem appears
         },
         err => console.error(err),
         () => console.log('template completed')
         );
}
    

  editorLoaded() {
    this.emailEditor.editor.loadDesign(sample
    );
  }

//App.component.html

<div class="content"  >
  <div fxLayout="" fxLayoutGap="10px grid" >
    <div [fxFlex]="(100/gridColumns) + '%'" fxFlex.xs="100%" fxFlex.sm="33%"  >
      <mat-card class="mat-elevation-z4 info" >
        <mat-card-content *ngFor="let item of templates" >     
               <!-- partie Html will be set here  to fit  -->
               
                {{item.templatebody}}
              
      </mat-card-content>
      
    </mat-card>
</div>
<mat-card class="mat-elevation-z4 info">
  <mat-card-content >     
         <!-- partie Html will be set here  to fit  -->

</mat-card-content>

</mat-card>
<mat-card class="mat-elevation-z4 info">
  <mat-card-content >     
         <!-- partie Html will be set here  to fit  -->

</mat-card-content>

</mat-card>
</div>
</div>