diff --git a/modules/ROOT/partials/integrations/angular-quick-start.adoc b/modules/ROOT/partials/integrations/angular-quick-start.adoc
index 76d2c8b6b4..2b72d57131 100644
--- a/modules/ROOT/partials/integrations/angular-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/angular-quick-start.adoc
@@ -12,7 +12,7 @@ This procedure requires https://nodejs.org/[Node.js (and npm)].
== Procedure
-. On a command line or command prompt, install the https://angular.io/cli[Angular CLI Tool] package.
+. On a command line or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] package.
+
[source,sh]
----
@@ -31,20 +31,20 @@ ng new --defaults --skip-git tinymce-angular-demo
cd tinymce-angular-demo
----
ifeval::["{productSource}" == "package-manager"]
-. Install the `+tinymce+` and `+tinymce-angular+` packages and save them to your `+package.json+` with `+--save+`.
+. Install the `+tinymce+` and `+tinymce-angular+` packages.
+
[source,sh]
----
-npm install --save tinymce @tinymce/tinymce-angular
+npm install tinymce @tinymce/tinymce-angular
----
endif::[]
ifeval::["{productSource}" != "package-manager"]
-. Install the `+tinymce-angular+` package and save it to your `+package.json+` with `+--save+`.
+. Install the `+tinymce-angular+` package.
+
[source,sh]
----
-npm install --save @tinymce/tinymce-angular
+npm install @tinymce/tinymce-angular
----
endif::[]
. Using a text editor, open `+/path/to/tinymce-angular-demo/src/app/app.component.ts+` and replace the contents with:
@@ -56,7 +56,6 @@ import { EditorComponent } from '@tinymce/tinymce-angular';
@Component({
selector: 'app-root',
- standalone: true,
imports: [EditorComponent],
template: `
{productname} {productmajorversion} Angular Demo
@@ -76,7 +75,7 @@ ifeval::["{productSource}" == "cloud"]
+
[source,tsx]
----
-
+
----
endif::[]
ifeval::["{productSource}" == "package-manager"]
@@ -179,7 +178,7 @@ To deploy the application to a local HTTP Server:
----
ng build
----
-. Copy the contents of the `+tinymce-angular-demo/dist+` directory to the root directory of the web server.
+. Copy the contents of the `+tinymce-angular-demo/dist/tinymce-angular-demo/browser+` directory to the root directory of the web server.
The application has now been deployed on the web server.
@@ -189,6 +188,8 @@ NOTE: Additional configuration is required to deploy the application outside the
== Angular Modules
`+EditorModule+` is available to import from `+@tinymce/tinymce-angular+`. Which should be included in your `+my.module.ts+` file.
+ifeval::["{productSource}" == "package-manager"]
+
[source,ts]
----
import { NgModule } from '@angular/core';
@@ -208,6 +209,27 @@ import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
export class MyModule {}
----
+endif::[]
+
+ifeval::["{productSource}" != "package-manager"]
+
+[source,ts]
+----
+import { NgModule } from '@angular/core';
+import { EditorModule } from '@tinymce/tinymce-angular';
+
+@NgModule({
+ /* ... */
+ imports: [
+ EditorModule
+ ],
+ /* ... */
+})
+export class MyModule {}
+----
+
+endif::[]
+
== Next Steps
* For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
diff --git a/modules/ROOT/partials/integrations/angular-tech-ref.adoc b/modules/ROOT/partials/integrations/angular-tech-ref.adoc
index f915cab951..b074c9ac15 100644
--- a/modules/ROOT/partials/integrations/angular-tech-ref.adoc
+++ b/modules/ROOT/partials/integrations/angular-tech-ref.adoc
@@ -48,7 +48,7 @@ To install the `+tinymce-angular+` package and save it to your `+package.json+`.
[source,sh]
----
-npm install --save @tinymce/tinymce-angular
+npm install @tinymce/tinymce-angular
----
[[using-the-tinymce-angular-integration]]
@@ -83,7 +83,7 @@ Add the `+EditorModule+` to `+@NgModule({imports})+`:
+
[source,html]
----
-
+
----
[[configuring-the-editor]]
@@ -104,10 +104,10 @@ The editor accepts the following properties:
plugins=""
tagName="div"
toolbar=""
->
+/>
----
-None of the configuration properties are *required* for `+tinymce-angular+` to work. Specify a {cloudname} API key using `+apiKey+` to remove the `+This domain is not registered...+` warning message.
+None of the configuration properties are *required* for `+tinymce-angular+` to work. Specify a {cloudname} API key using `+apiKey+` to remove the "A valid API key is required to continue using TinyMCE. Please alert the admin to check the current API key. Click here to learn more." warning message.
[[apikey]]
=== `+apiKey+`
@@ -124,9 +124,7 @@ include::partial$misc/get-an-api-key.adoc[]
[source,html]
----
-
+
----
[[licensekey]]
@@ -146,9 +144,7 @@ Use this when self-hosting {productname} instead of loading from {cloudname}. Fo
[source,jsx]
----
-
+
----
[[cloudchannel]]
@@ -172,9 +168,9 @@ Such as:
[source,html,subs="attributes+"]
----
+/>
----
For information {productname} development channels, see: xref:editor-plugin-version.adoc#{productmajorversion}-{productmajorversion}-testing-and-{productmajorversion}-dev-release-channels[Specifying the {productname} editor version deployed from Cloud - dev, testing, and stable releases].
@@ -194,9 +190,7 @@ The `+disabled+` property can dynamically switch the editor between a "disabled"
[source,html]
----
-
+
----
[[id]]
@@ -212,9 +206,7 @@ An id for the editor. Used for retrieving the editor instance using the `+tinymc
[source,html]
----
-
+
----
[[init]]
@@ -237,7 +229,7 @@ For information on the {productname} selector (`+tinymce.init+`), see: xref:basi
plugins: 'lists link image paste help wordcount',
toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
}"
->
+/>
----
[[initialvalue]]
@@ -253,15 +245,13 @@ Initial content of the editor when the editor is initialized.
[source,html]
----
-
+
----
[[inline]]
=== `+inline+`
-Used to set the editor to inline mode. Using `++` is the same as setting `+{inline: true}+` in the {productname} selector (`+tinymce.init+`).
+Used to set the editor to inline mode. Using `++` is the same as setting `+{inline: true}+` in the {productname} selector (`+tinymce.init+`).
For information on inline mode, see: xref:inline-editor-options.adoc#inline[User interface options - `+inline+`] and xref:use-tinymce-inline.adoc[Setup inline editing mode].
@@ -275,27 +265,23 @@ For information on inline mode, see: xref:inline-editor-options.adoc#inline[User
[source,html]
----
-
+
----
[[plugins]]
=== `+plugins+`
-Used to include plugins for the editor. Using `++` is the same as setting `+{plugins: 'lists code'}+` in the {productname} selector (`+tinymce.init+`).
+Used to include plugins for the editor. Using `++` is the same as setting `+{plugins: 'lists code'}+` in the {productname} selector (`+tinymce.init+`).
For information on adding plugins to {productname}, see: xref:work-with-plugins.adoc[Add plugins to {productname}].
-*Type:* `+String+` or `+Array+`
+*Type:* `+String+`
==== Example: using `+plugins+`
[source,html]
----
-
+
----
[[outputformat]]
@@ -313,15 +299,13 @@ Used to specify the format of the content emitted by the `+tinymce-angular+` com
[source,html]
----
-
+
----
[[tagname]]
=== `+tagName+`
-Only valid when xref:inline[`++`]. Used to define the HTML element for the editor in inline mode.
+Only valid when xref:inline[`++`]. Used to define the HTML element for the editor in inline mode.
*Type:* `+String+`
@@ -334,13 +318,13 @@ Only valid when xref:inline[`++`]. Used to defi
+/>
----
[[toolbar]]
=== `+toolbar+`
-Used to set the toolbar for the editor. Using `++` is the same as setting `+{toolbar: 'bold italic'}+` in the {productname} selector (`+tinymce.init+`).
+Used to set the toolbar for the editor. Using `++` is the same as setting `+{toolbar: 'bold italic'}+` in the {productname} selector (`+tinymce.init+`).
For information setting the toolbar for {productname}, see: xref:toolbar-configuration-options.adoc#toolbar[User interface options - toolbar].
@@ -355,7 +339,7 @@ For information setting the toolbar for {productname}, see: xref:toolbar-configu
+/>
----
[[using-the-ngmodel-directive]]
@@ -365,10 +349,10 @@ The `+ngModel+` directive can be added to use the editor in a form:
[source,html]
----
-
+
----
-For information on using `+NgModel+`, see: https://angular.io/api/forms/NgModel[Angular documentation - NgModel].
+For information on using `+NgModel+`, see: link:https://angular.dev/api/forms/NgModel[Angular documentation - NgModel].
[[modelevents]]
=== `+modelEvents+`
@@ -387,9 +371,7 @@ Used to specify the events that trigger the `+NgModelChange+` to emit.
[source,html]
----
-
+
----
[[using-with-reactive-forms]]
@@ -402,10 +384,10 @@ To use {productname} Angular component with reactive forms:
+
[source,html]
----
-
+
----
-For information on using reactive forms, see: https://angular.io/guide/reactive-forms[Angular documentation - Reactive Forms].
+For information on using reactive forms, see: https://angular.dev/guide/forms/reactive-forms[Angular documentation - Reactive Forms].
[[event-binding]]
== Event binding
@@ -414,7 +396,7 @@ Functions can be bound to editor events, such as:
[source,html]
----
-
+
----
When the handler is called (`+handleEvent+` in this example), it is called with an event containing two properties:
@@ -517,9 +499,7 @@ Used to provide an allow-list of valid events to trigger from the editor to the
[source,html]
----
-
+
----
[[ignoreevents]]
@@ -537,7 +517,5 @@ Used to block a list of events from the `+tinymce-angular+` component.
[source,html]
----
-
+
----