Adding text to froala in Angular 4

Question

I have a froala editor that I wish to add some text to. So far I've tried using innerhtml:

HTML

<div id="notesDiv" #divvy [froalaEditor]="options" [(froalaModel)]="editorContent">
</div>

Typescript

@ViewChild('divvy') divvy:ElementRef;
toAppend: string = '<p>Hi there!</p>';
this.divvy.nativeElement.innerHTML = this.toAppend;

The problem here is that while it appends the html, it removes the editor completely.

What it does:

What I want:

In the documentation there is a method for this:

$('.selector').froalaEditor('html.set', '<p>My custom paragraph.</p>');

Is there a way to do this in angular4/typescript?

Answer 1

Solved this just by assigning the editorContent variable to something in typescript:

ngOnInit() {
    this.editorContent = <p>Hello!</p>
}