Hi this is my editor editor.component.html where i am using primeng editor. i am using it in a form that allows to fill this editor either while creating a meeting or editing it. In the case of create, everything is working normally, in my payload i send an html of whatever i write in the editor.

The problem is, when i want to edit a meeting, and i open the form, i expect this editor to be pre-filled but its empty.

<div class="editor">
    <div>
        <label *ngIf="showLabel" for="editor">{{ label }}</label>
        <span *ngIf="required" class="required-asterisk">*</span>
    </div>
    <p-editor 
        [(ngModel)]="value" 
        (onInit)="onEditorInit($event)" 
        (onTextChange)="onTextChange($event)"
        [readonly]="readOnly" 
        [style]="{ height: '400px', width: '500px', 'overflow-y': 'auto' }"
     ></p-editor>
    <p>Tag: [title] [start_date] [start_time] [url]</p>
</div>

import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { EditorModule } from 'primeng/editor';

@Component({
    selector: 'app-editor',
    templateUrl: './editor.component.html',
    styleUrls: ['./editor.component.scss'],
    standalone: true,
    imports: [FormsModule, CommonModule, EditorModule]
})
export class EditorComponent implements OnInit {
    @Input() value: string | undefined = '';
    @Input() readOnly: boolean = false;
    @Input() required: boolean = false;
    @Input() showLabel: boolean = true;
    @Input() label: string = '';
    @Output() valueChange = new EventEmitter<string>();

    constructor() { }

    ngOnInit() {
        if (this.value) {
            this.valueChange.emit(this.value);
        }
    }

    
    onTextChange(event: any): void {
        this.value = event.htmlValue;
        this.valueChange.emit(this.value);
    }

    onEditorInit(event: any): void {
        if (this.value) {
            event.editor.setContents(event.editor.clipboard.convert(this.value));
        }
    }
}

in the form where i call this editor component i have this
<app-editor [label]="'Testo Mail'" [required]="true [(value)]="payload.mailBody" ></app-editor>

payload.mailBody has a string for example "<p>Hello world</p>". If i add a line to my editor.component.html to display <div>{{value}}</div> below the <p-editor>, i can see mailBody string correctly

I thought maybe, the value isn’t initialized but adding a check in the onInit() method, i can see that the value exists, i don’t understand how to populate the primeng editor component.

I come from a react background and have not worked with angular or primeng before so this might be trivial, but i am stuck here