Angular directive does not work inside the `contenteditable` element

Question

Angular directive does not work inside the contenteditable element. How could I fix it?

Here is my sample use case.

I have a directive:

import { Directive, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Directive({
  // tslint:disable-next-line: directive-selector
  selector: '.customDownload',
})
export class ImgHandlingDirective {
  constructor(
    private el: ElementRef<HTMLImageElement>,
    private http: HttpClient,
  ) {
    
    alert("code reached");
  }
  
}

When I add an element with the customDownload class outside of the contenteditable I am getting the alert message as expected:

import { Component, ViewChild, Output } from '@angular/core';
import { DialogComponent } from './dialog.component';
import { EditorComponent } from '@progress/kendo-angular-editor';

@Component({
    selector: 'my-app',
    template: `
    <kendo-editor #editor style="height: 400px;" [iframe]="false">
        <kendo-toolbar>
            <kendo-toolbar-buttongroup>
                <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
            <kendo-toolbar-button text="Upload Image" (click)="open()"></kendo-toolbar-button>
        </kendo-toolbar>
    </kendo-editor>

    <img class="customDownload" />

    <my-dialog #upload [editor]="editor"></my-dialog>   
  `
})
export class AppComponent {
    @ViewChild('upload') public dialog: DialogComponent;
    @Output() @ViewChild('editor') public editor: EditorComponent;

    public open() {
        this.dialog.open();
    }
}

Now I change my code to the following:

import { Component, ViewChild, Output } from '@angular/core';
import { DialogComponent } from './dialog.component';
import { EditorComponent } from '@progress/kendo-angular-editor';

@Component({
    selector: 'my-app',
    template: `
    <kendo-editor #editor style="height: 400px;" [iframe]="false">
        <kendo-toolbar>
            <kendo-toolbar-buttongroup>
                <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
                <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
            <kendo-toolbar-button text="Upload Image" (click)="open()"></kendo-toolbar-button>
        </kendo-toolbar>
    </kendo-editor>

    <my-dialog #upload [editor]="editor"></my-dialog>   
  `
})
export class AppComponent {
    @ViewChild('upload') public dialog: DialogComponent;
    @Output() @ViewChild('editor') public editor: EditorComponent;

    public open() {
        this.dialog.open();
    }
}

Go to Upload Image:

Upload an image:

Check that the image was uploaded with the necessary class:

And now I see that the element was added to DOM, but Angular has just ignored it and no directive constructor run.

Here is the working example from the stackblitz.

I need the directive to be run (i.e. the alert message to be displayed) for the dynamically added element (i.e. an image with class customDownload). How could I achieve this?