initialize primeng editor component with existing data

Question

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

Answer 1

It looks like the issue might be related to the timing of when the onEditorInit function is called. The PrimeNG editor component might be getting initialized before the value property has been set with the data from the server API call.

To address this, I would suggest trying to remove the onInit event and seeing if that resolves the issue. The [(ngModel)] binding should automatically handle the initialization of the editor content once the value is set.

Here's your modified editor.component.html:

<div class="editor">
    <div>
        <label *ngIf="showLabel" for="editor">{{ label }}</label>
        <span *ngIf="required" class="required-asterisk">*</span>
    </div>
    <p-editor 
        [(ngModel)]="value" 
        (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>

And here's your modified EditorComponent:

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);
    }
}

By removing the onEditorInit method, the editor should correctly display the pre-filled content once the value is set.

Let me know if this helps!