Fixed for iframe.

src/Squidex/app/framework/angular/forms/control-errors.component.ts

@@ -86,7 +86,7 @@ export class ControlErrorsComponent extends StatefulComponent<State> implements
         }
 
         if (this.control !== control) {
-            this.ngOnDestroy();
+            this.unsubscribeAll();
 
             this.control = control;
 

src/Squidex/app/framework/angular/forms/iframe-editor.component.html

@@ -1 +1 @@
-<iframe #iframe scrolling="no" [attr.src]="sanitizedUrl" width="100%"></iframe>
+<iframe #iframe scrolling="no" width="100%"></iframe>

src/Squidex/app/framework/angular/forms/iframe-editor.component.ts

@@ -5,9 +5,8 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnChanges, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
 import { ExternalControlComponent, Types } from '@app/framework/internal';
 
@@ -22,50 +21,42 @@ export const SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     providers: [SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class IFrameEditorComponent extends ExternalControlComponent<any> implements AfterViewInit,  OnInit {
+export class IFrameEditorComponent extends ExternalControlComponent<any> implements OnChanges, OnInit {
     private value: any;
     private isDisabled = false;
     private isInitialized = false;
-    private plugin: HTMLIFrameElement;
 
     @ViewChild('iframe')
     public iframe: ElementRef<HTMLIFrameElement>;
 
     @Input()
-    public set url(value: string) {
+    public url: string;
-        this.sanitizedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(value);
-    }
-
-    public sanitizedUrl: SafeResourceUrl;
 
     constructor(changeDetector: ChangeDetectorRef,
-        private readonly sanitizer: DomSanitizer,
         private readonly renderer: Renderer2
     ) {
         super(changeDetector);
     }
 
-    public ngAfterViewInit() {
+    public ngOnChanges() {
-        this.plugin = this.iframe.nativeElement;
+        this.iframe.nativeElement.src = this.url;
     }
 
     public ngOnInit(): void {
         this.own(
             this.renderer.listen('window', 'message', (event: MessageEvent) => {
-                if (event.source === this.plugin.contentWindow) {
+                if (event.source === this.iframe.nativeElement.contentWindow) {
                     const { type } = event.data;
 
                     if (type === 'started') {
                         this.isInitialized = true;
 
-                        if (this.plugin.contentWindow && Types.isFunction(this.plugin.contentWindow.postMessage)) {
+                        this.sendMessage({ type: 'disabled', isDisabled: this.isDisabled });
-                            this.plugin.contentWindow.postMessage({ type: 'disabled', isDisabled: this.isDisabled }, '*');
+                        this.sendMessage({ type: 'valueChanged', value: this.value });
-                            this.plugin.contentWindow.postMessage({ type: 'valueChanged', value: this.value }, '*');
-                        }
                     } else if (type === 'resize') {
                         const { height } = event.data;
 
-                        this.plugin.height = height + 'px';
+                        this.iframe.nativeElement.height = height + 'px';
                     } else if (type === 'valueChanged') {
                         const { value } = event.data;
 
@@ -84,16 +75,20 @@ export class IFrameEditorComponent extends ExternalControlComponent<any> impleme
     public writeValue(obj: any) {
         this.value = obj;
 
-        if (this.isInitialized && this.plugin.contentWindow && Types.isFunction(this.plugin.contentWindow.postMessage)) {
+        this.sendMessage({ type: 'valueChanged', value: this.value });
-            this.plugin.contentWindow.postMessage({ type: 'valueChanged', value: this.value }, '*');
-        }
     }
 
     public setDisabledState(isDisabled: boolean): void {
         this.isDisabled = isDisabled;
 
-        if (this.isInitialized && this.plugin.contentWindow && Types.isFunction(this.plugin.contentWindow.postMessage)) {
+        this.sendMessage({ type: 'disabled', isDisabled: this.isDisabled });
-            this.plugin.contentWindow.postMessage({ type: 'disabled', isDisabled: this.isDisabled }, '*');
+    }
+
+    private sendMessage(message: any) {
+        const iframe = this.iframe.nativeElement;
+
+        if (this.isInitialized && iframe.contentWindow && Types.isFunction(iframe.contentWindow.postMessage)) {
+            iframe.contentWindow.postMessage(message, '*');
         }
     }
 }

src/Squidex/app/framework/angular/modals/modal-target.directive.ts

@@ -20,7 +20,7 @@ export class ModalTargetDirective extends ResourceOwner implements AfterViewInit
     @Input('sqxModalTarget')
     public set target(element: any) {
         if (element !== this.targetElement) {
-            this.ngOnDestroy();
+            this.unsubscribeAll();
 
             this.targetElement = element;
 

src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts

@@ -100,12 +100,12 @@ export class OnboardingTooltipComponent extends StatefulComponent implements OnD
     public hideThis() {
         this.onboardingService.disable(this.helpId);
 
-        this.ngOnDestroy();
+        this.unsubscribeAll();
     }
 
     public hideAll() {
         this.onboardingService.disableAll();
 
-        this.ngOnDestroy();
+        this.unsubscribeAll();
     }
 }

src/Squidex/app/framework/angular/stateful.component.ts

@@ -32,6 +32,10 @@ export class ResourceOwner implements OnDestroy {
     }
 
     public ngOnDestroy() {
+        this.unsubscribeAll();
+    }
+
+    public unsubscribeAll() {
         try {
             for (let subscription of this.subscriptions) {
                 if (Types.isFunction(subscription)) {
@@ -48,6 +52,7 @@ export class ResourceOwner implements OnDestroy {
 
 export abstract class StatefulComponent<T = any> extends State<T> implements OnDestroy {
     private readonly subscriptions = new ResourceOwner();
+    private subscription: Subscription;
 
     constructor(
         private readonly changeDetector: ChangeDetectorRef,
@@ -55,17 +60,23 @@ export abstract class StatefulComponent<T = any> extends State<T> implements OnD
     ) {
         super(state);
 
-        this.own(
+        this.subscription =
             this.changes.pipe(skip(1)).subscribe(() => {
                 this.changeDetector.detectChanges();
-            }));
+            });
     }
 
     public ngOnDestroy() {
-        this.subscriptions.ngOnDestroy();
+        this.subscription.unsubscribe();
+
+        this.unsubscribeAll();
+    }
+
+    protected unsubscribeAll() {
+        this.subscriptions.unsubscribeAll();
     }
 
-    public detectChanges() {
+    protected detectChanges() {
         this.changeDetector.detectChanges();
     }