Cannot inherit editable text from databse to froala editor

This is the output i am getting

I want to have a template loader function. So , upon selecting the drowpdown the HTML that has already been saved in firebase will load as text inside the froala editor which will enable us to edit on the template itself.

i could not load correctly and also could not load..please assist me..

import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { CalendarEvent } from 'angular-calendar';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Visit } from '../visit.model';
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
import { TemplateFirebaseService } from '../../../template/templateFirebase.Service';
import { Template } from '../../../template/template.model';
import { Subscription } from 'rxjs/Subscription';
import { FusePatientInfoService } from '../patient-info.service';

@Component({
  selector: 'app-visit-notes-form',
  templateUrl: './visit-note-form.component.html',
  styleUrls: ['./visit-note-form.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class NewVisitNoteFormComponent implements OnInit {

  dialogTitle: string;
  visitForm: FormGroup;
  action: string;
  visit_record: Visit;
  template: any;
  onTemplateChanged: Subscription;

  selectedTemp: string="";

  selectChangeHandler(event: any){
    this.selectedTemp = event.target.value;
  }


  constructor(
    public dialogRef: MatDialogRef<NewVisitNoteFormComponent>,
    @Inject(MAT_DIALOG_DATA) private data: any,
    private formBuilder: FormBuilder,
    private templateFirebaseService: TemplateFirebaseService,
    private patientInfoService: FusePatientInfoService,

    // public selTemp: object =[];  //create object for stornig filter
  ) {
      this.action = data.action;

      if (this.action === 'edit') {
        this.dialogTitle = 'Edit Visit Note';
        this.visit_record = data.visitNote;
      }
      else {
        this.dialogTitle = 'New Visit Note';
        this.visit_record = new Visit({});
      }

      this.visitForm = this.createVisitRecord();
  }
  ngOnInit() {
    this.onTemplateChanged =
        this.patientInfoService.onTemplateChanged
              .subscribe(template => {
              console.log('lala',template);
              this.template = template;
              console.log('hhaha',this.template);
            });

    this.froalaEditorContent=this.selectedTemp;

  }

  createVisitRecord()
  {
    return this.formBuilder.group({
      guid:              [this.visit_record.guid],
      date:              [ this.visit_record.date],
      systolic:          [ this.visit_record.systolic],
      diastolic:         [this.visit_record.diastolic],
      height:            [this.visit_record.height],
      weight:            [this.visit_record.weight],
      visittext:         [this.visit_record.visittext],
      chiefofcomplaints: [this.visit_record.chiefofcomplaints],
      pulserate:         [this.visit_record.pulserate],
    })
  }
}
            <div class="form" fxFlex>
              <div>
              <select (change)="selectChangeHandler($event)">
                <option value="" disabled selected>Select a Template</option>
                <option *ngFor="let temp of template" [value]="temp.text">{{temp.title}}</option>
              </select><br>
              <div
              [froalaEditor]>{{selectedTemp}}
              </div>