I'm trying to implement a wysiwyg editor in Angular, but this is a huge challenge for me.
In the meantime I have at least got the editor to work but cannot transfer the values.
Please help.
Here is my code:

summernote.module.ts

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgxSummernoteModule } from 'ngx-summernote';
import { SummernoteComponent } from './summernote.component';

@NgModule({

  declarations: [SummernoteComponent],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    NgxSummernoteModule,
    HttpClientModule,
    CommonModule
  ],
  bootstrap:[SummernoteComponent],
  exports: [SummernoteComponent]
})
export class SummernoteModule { }

summernote.component.html

<ng-container *ngIf="showTemplateForm">
  <form>
    <textarea
        name="html" [(ngModel)]="html"
        [ngxSummernote]="config"
        [ngxSummernoteDisabled]="editorDisabled"
        (blur)="onBlur()"
        (mediaDelete)="onDelete($event)"
        (summernoteInit)="summernoteInit($event)">
    </textarea>
  </form>

  <h3>Vorschau:</h3>
  <div [ngxSummernoteView]="html"></div>

  <h3>Code</h3>
  <pre>{{html}}</pre>
  <div *ngIf="!html || html === ''">
    Required
  </div>
</ng-container>

summernote.component.ts

import { Component, Input, OnInit } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";
import { DomSanitizer } from "@angular/platform-browser";

declare var $: { summernote: { ui: any; }; };
@Component({
  selector: 'app-editor',
  templateUrl: './summernote.component.html',
  styleUrls: ['./summernote.component.css']
})

export class SummernoteComponent implements OnInit {

  showTemplateForm = true;

  @Input() html?: string;

  form: FormGroup;
  config: any = {
    airMode: false,
    tabDisable: true,
    popover: {
      table: [
        ['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
        ['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
      ],
      image: [
        ['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
        ['float', ['floatLeft', 'floatRight', 'floatNone']],
        ['remove', ['removeMedia']],
      ],
      link: [['link', ['linkDialogShow', 'unlink']]],
      air: [
        [
          'font',
          [
            'bold',
            'italic',
            'underline',
            'strikethrough',
            'superscript',
            'subscript',
            'clear',
          ],
        ],
      ],
    },
    height: '200px',
    uploadImagePath: '/api/upload',
    toolbar: [
      ['misc', ['codeview', 'undo', 'redo', 'codeBlock']],
      [
        'font',
        [
          'bold',
          'italic',
          'underline',
          'strikethrough',
          'superscript',
          'subscript',
          'clear',
        ],
      ],
      ['fontsize', ['fontname', 'fontsize', 'color']],
      ['para', ['style0', 'ul', 'ol', 'paragraph', 'height']],
      ['insert', ['table', 'picture', 'link', 'video', 'hr']],
      ['customButtons', ['testBtn']],
    ],
    codeviewFilter: true,
    codeviewFilterRegex: /<\/*(?:applet|b(?:ase|gsound|link)|embed|frame(?:set)?|ilayer|l(?:ayer|ink)|meta|object|s(?:cript|tyle)|t(?:itle|extarea)|xml|.*onmouseover)[^>]*?>/gi,
    codeviewIframeFilter: true,
  };

  editorDisabled = false;

  get sanitizedHtml() {
    return this.sanitizer.bypassSecurityTrustHtml(this.form.get('html')!.value);
  }

  constructor(private sanitizer: DomSanitizer) {
    this.form = new FormGroup({
      html: new FormControl('', Validators.required),
    });
  }

  ngOnInit() {}

  onBlur() {
    console.log('Blur');
  }

  onDelete(file: { url: any; }) {
    console.log('Delete file', file.url);
  }

  summernoteInit(event: any) {
    console.log(event);
  }
}

app.component.html

<form class="input-form" [formGroup]="form" (submit)="onSubmit()">
<app-editor formControlName="myEditor" [html]="htmlTest" ngDefaultControl></app-editor>
<button mat-raised-button color="primary" type="button">Speichern</button>
</form>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  htmlTest = "";
  constructor() {}

  ngOnInit(): void {
    this.createForm();
  }

  createForm() {
    this.form = this.fb.group({ 
      myEditor: new FormControl(""),
    })
  }

  get myEditor(): FormControl{
    return this.form.controls['myEditor'] as FormControl;
  }
}

I hope that i got everything.
The problem is, that the myEditor value shows undefined or is empty. So please tell me, how can i access the value of the html?