INT-3328: fix disabled property with ngmodel

Author: michalnieruchalski-tiugo

tinymce-angular-component/src/main/ts/editor/editor.component.ts

@@ -68,7 +68,7 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal
   @Input()
   public set readonly(val) {
     this._readonly = val;
-    if (this._editor && this._editor.initialized) {
+    if (this._editor) {
       setMode(this._editor, val ? 'readonly' : 'design');
     }
   }
@@ -80,7 +80,7 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal
   @Input()
   public set disabled(val) {
     this._disabled = val;
-    if (this._editor && this._editor.initialized) {
+    if (this._editor) {
       if (DisabledUtils.isDisabledOptionSupported()) {
         this._editor.options.set('disabled', val ?? false);
       } else {

tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts

@@ -2,9 +2,12 @@ import { Assertions } from '@ephox/agar';
 import '../alien/InitTestEnvironment';
 
 import { EditorComponent } from '../../../main/ts/public_api';
-import { describe, it } from '@ephox/bedrock-client';
+import { beforeEach, describe, it } from '@ephox/bedrock-client';
 import { eachVersionContext, editorHook } from '../alien/TestHooks';
 import { Editor } from 'tinymce';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { Component, ViewChild } from '@angular/core';
 
 describe('DisabledPropertyTest', () => {
   const getMode = (editor: Editor) => {
@@ -104,4 +107,35 @@ describe('DisabledPropertyTest', () => {
       assertDesignMode(editor);
     });
   });
+
+  eachVersionContext([ '7' ], () => {
+    @Component({
+      imports: [ FormsModule, EditorComponent ],
+      template: `<editor [(ngModel)]="text" [disabled]="true" />`,
+      standalone: true,
+      selector: 'test-host-component'
+    })
+    class TestHostComponent {
+      public text = '<h1>Hello World</h1>';
+      @ViewChild(EditorComponent) public editorRef!: EditorComponent;
+    }
+
+    let fixture: ComponentFixture<TestHostComponent>;
+    let testHost: TestHostComponent;
+
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        imports: [ TestHostComponent ]
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(TestHostComponent);
+      testHost = fixture.componentInstance;
+      fixture.detectChanges();
+    });
+
+    it('INT-3328: disabled property should work with [ngModel] when TinyMCE has been loaded before editor component has been created', () => {
+      const tinyEditor = testHost.editorRef.editor;
+      assertDisabledOption(tinyEditor!, true);
+    });
+  });
 });