Im not able to patch value in froala editor. i tried several ways..but i have patch value from component file

i have created a froala component but im not able to patch value .

i am using new froala editor from component file to instantiate the froala editor in my component

I'm getting value though while I'm patching value from other components where im using this custom build froala component but not able to set value in froala editor

<div id="froala-editor" class="froala__editor"></div>

This is the html for the component`

 ngOnInit(): void {
        let self = this;
        this.editorInstance = new FroalaEditor('div#froala-editor', {
            placeholderText: 'Write your message here!',
            charCounterCount: false,
            key: FROALA_EDITOR_KEY,
            toolbarButtons: {
                moreText: {
                    buttons: [
                        'bold',
                        'italic',
                        'underline',
                        'clearFormatting',
                        'align'
                    ],
                    align: 'left',
                    buttonsVisible: 0
                }
            },
            toolbarSticky: false,
            toolbarBottom: true,
            attribution: false,

            events: {
                contentChanged: function () {
                    // INFO: this is the editor instance.
                    self.onChange(this.html.get());
                },
                blur: function () {
                    // INFO: this is the editor instance.
                    this.selection.save();
                }
            }
    

});
}`

this is the component file when im intializing editor

writeValue(value: any) {
    if (value !== undefined && value !== '') {
        console.log(value);
        // this.editorInstance.html.insert(value);
        // this.onChange(this.editorInstance.html.get());
        this.editorContent = value;

        this.cdr.detectChanges();
    } else {
        // INFO: if set as empty or null undefined tag is added hence adding an div
        this.editorContent = '<div></div>';
    }
}

this is how im trying to patch value in froala editor

also i tried using froalamodel...but i have to create instance of froala from component itself or else ui gets distorted

so please help me how can i patch value here