INT-3376: Support Angular v19

README.md

@@ -13,7 +13,7 @@ This package is a thin wrapper around [TinyMCE](https://github.com/tinymce/tinym
 
 |Angular version|`tinymce-angular` version|
 |---            |---                      |
-|16+            |8+                       |
+|>=16.x <=19.x  |8+                       |
 |14+            |7.x                      |
 |13+            |6.x                      |
 |9+             |4.x                      |

package.json

@@ -15,31 +15,31 @@
   },
   "private": true,
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.1.1",
-    "@angular-devkit/core": "^18.1.1",
-    "@angular/animations": "^18.1.1",
-    "@angular/cdk": "^18.1.1",
-    "@angular/cli": "^18.1.1",
-    "@angular/common": "^18.1.1",
-    "@angular/compiler": "^18.1.1",
-    "@angular/compiler-cli": "^18.1.1",
-    "@angular/core": "^18.1.1",
-    "@angular/forms": "^18.1.1",
-    "@angular/language-service": "^18.1.1",
-    "@angular/material": "^18.1.1",
-    "@angular/platform-browser": "^18.1.1",
-    "@angular/platform-browser-dynamic": "^18.1.1",
+    "@angular-devkit/build-angular": "^19",
+    "@angular-devkit/core": "^19",
+    "@angular/animations": "^19",
+    "@angular/cdk": "^19",
+    "@angular/cli": "^19",
+    "@angular/common": "^19",
+    "@angular/compiler": "^19",
+    "@angular/compiler-cli": "^19",
+    "@angular/core": "^19",
+    "@angular/forms": "^19",
+    "@angular/language-service": "^19",
+    "@angular/material": "^19",
+    "@angular/platform-browser": "^19",
+    "@angular/platform-browser-dynamic": "^19",
     "@babel/core": "^7.24.9",
     "@ephox/agar": "^8.0.1",
     "@ephox/bedrock-client": "^14.1.1",
     "@ephox/bedrock-server": "^14.1.3",
     "@ephox/sugar": "^9.3.1",
-    "@storybook/addon-essentials": "^8.2.5",
-    "@storybook/addon-interactions": "^8.2.5",
+    "@storybook/addon-essentials": "~8.5",
+    "@storybook/addon-interactions": "~8.5",
     "@storybook/addon-links": "^8.2.5",
-    "@storybook/angular": "^8.2.5",
+    "@storybook/angular": "~8.5",
     "@storybook/blocks": "^8.2.5",
-    "@storybook/test": "^8.2.5",
+    "@storybook/test": "~8.5",
     "@tinymce/beehive-flow": "^0.19.0",
     "@tinymce/eslint-plugin": "^3.0.0",
     "@tinymce/miniature": "^6.0.0",
@@ -61,7 +61,7 @@
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
     "rxjs": "^7.8.1",
-    "storybook": "^8.2.5",
+    "storybook": "~8.5",
     "tinymce": "^8.0.0",
     "tinymce-4": "npm:tinymce@^4",
     "tinymce-5": "npm:tinymce@^5",
@@ -73,7 +73,7 @@
     "tslib": "^2.6.2",
     "typescript": "~5.5.4",
     "webpack": "^5.95.0",
-    "zone.js": "~0.14.8"
+    "zone.js": "~0.15.0"
   },
   "version": "9.1.2-rc",
   "name": "@tinymce/tinymce-angular"

stories/contentprojection/ContentProjection.component.ts

@@ -33,7 +33,8 @@ import { apiKey } from '../Settings';
       <button [innerText]="show ? 'Hide' : 'Show'" (click)="handleToggle()"></button>
       <ng-container *ngTemplateOutlet="show ? editorTemplate : placeHolder"></ng-container>
     <div>
-  `
+  `,
+  standalone: false
 })
 export class ContainerComponent {
   @Input() public editorTemplate!: TemplateRef<any>;
@@ -52,7 +53,8 @@ export class ContainerComponent {
     </ng-template>
 
     <container [editorTemplate]="editorTemplate"></container>
-  `
+  `,
+  standalone: false
 })
 export class ContentProjectionComponent {
   public apiKey = apiKey;

stories/data-binding/DataBinding.component.ts

@@ -4,7 +4,8 @@ import { apiKey, modelEvents, sampleContent } from '../Settings';
 
 @Component({
   selector: 'binding',
-  templateUrl: './DataBinding.component.html'
+  templateUrl: './DataBinding.component.html',
+  standalone: false
 })
 export class BindingComponent {
   public isEditingContent = true;

stories/disable/Disable.component.ts

@@ -4,6 +4,7 @@ import { apiKey, sampleContent } from '../Settings';
 @Component({
   selector: 'disabling',
   templateUrl: './Disabling.component.html',
+  standalone: false
 })
 export class DisablingComponent {
   public isDisabled = false;

stories/event-binding/EventBinding.component.ts

@@ -5,6 +5,7 @@ import { apiKey } from '../Settings';
 @Component({
   selector: 'event-binding',
   templateUrl: './EventBinding.component.html',
+  standalone: false
 })
 export class EventBindingComponent {
   public apiKey = apiKey;

stories/event-forwarding/EventForwarding.component.ts

@@ -5,6 +5,7 @@ import { apiKey } from '../Settings';
 @Component({
   selector: 'event-forwarding',
   templateUrl: './EventForwarding.component.html',
+  standalone: false
 })
 export class EventForwardingComponent {
   public apiKey = apiKey;

stories/form-control/FormControl.component.ts

@@ -5,6 +5,7 @@ import { apiKey } from 'stories/Settings';
 @Component({
   selector: 'form-control',
   templateUrl: './FormControl.component.html',
+  standalone: false,
 })
 export class FormControlComponent {
   public apiKey = apiKey;

stories/form-with-on-push/form-with-on-push.component.ts

@@ -12,6 +12,7 @@ import { apiKey } from 'stories/Settings';
   selector: 'form-with-on-push',
   templateUrl: './form-with-on-push.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false
 })
 export class FormWithOnPushComponent {
   @Input() public apiKey = apiKey;

stories/formvalidation/FormValidation.component.ts

@@ -16,7 +16,8 @@ import { apiKey } from '../Settings';
     .preview {
       border: 1px solid rgb(190, 190, 190);
     }
-  ` ]
+  ` ],
+  standalone: false
 })
 export class BlogComponent {
   public submitted = false;

stories/materialtabs/MaterialTabs.component.ts

@@ -4,7 +4,8 @@ import { apiKey } from '../Settings';
 
 @Component({
   selector: 'material-tabs',
-  templateUrl: './MaterialTabs.component.html'
+  templateUrl: './MaterialTabs.component.html',
+  standalone: false
 })
 export class MaterialTabs implements AfterViewInit {
   @ViewChild('tabGroup', { static: false }) public tabGroup: any;

stories/pipes/Safe.pipe.ts

@@ -2,7 +2,8 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 @Pipe({
-  name: 'safe'
+  name: 'safe',
+  standalone: false
 })
 export class SafePipe implements PipeTransform {
 

stories/readonly/Readonly.component.ts

@@ -4,6 +4,7 @@ import { apiKey, sampleContent } from '../Settings';
 @Component({
   selector: 'readonly',
   templateUrl: './Readonly.component.html',
+  standalone: false
 })
 export class ReadonlyComponent {
   public isReadonly = false;

stories/viewquery/Viewquery.component.ts

@@ -4,7 +4,8 @@ import { apiKey } from '../Settings';
 
 @Component({
   selector: 'view-query',
-  templateUrl: './Viewquery.component.html'
+  templateUrl: './Viewquery.component.html',
+  standalone: false
 })
 export class ViewQueryComponent {
   @ViewChild(EditorComponent, { static: true }) public editorComponent!: EditorComponent;