DOC-3182: update angular integration docs

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: `
   <h1>{productname} {productmajorversion} Angular Demo</h1>
@@ -76,7 +75,7 @@ ifeval::["{productSource}" == "cloud"]
 +
 [source,tsx]
 ----
-<editor apiKey="your-api-key" [init]="init" />
+<editor apiKey="no-api-key" [init]="init" />
 ----
 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].

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]
 ----
-<editor apiKey="test" [init]="{plugins: 'link'}"></editor>
+<editor apiKey="no-api-key" [init]="{plugins: 'link'}" />
 ----
 
 [[configuring-the-editor]]
@@ -104,10 +104,10 @@ The editor accepts the following properties:
   plugins=""
   tagName="div"
   toolbar=""
-></editor>
+/>
 ----
 
-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]
 ----
-<editor
-  apiKey="your-api-key"
-></editor>
+<editor apiKey="no-api-key" />
 ----
 
 [[licensekey]]
@@ -146,9 +144,7 @@ Use this when self-hosting {productname} instead of loading from {cloudname}. Fo
 
 [source,jsx]
 ----
-<Editor
-  licenseKey='your-license-key'
-/>
+<editor licenseKey='your-license-key' />
 ----
 
 [[cloudchannel]]
@@ -172,9 +168,9 @@ Such as:
 [source,html,subs="attributes+"]
 ----
 <editor
-  apiKey="your-api-key"
+  apiKey="no-api-key"
   cloudChannel="{productmajorversion}-dev"
-></editor>
+/>
 ----
 
 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]
 ----
-<editor
-  [disabled]="true"
-></editor>
+<editor [disabled]="true" />
 ----
 
 [[id]]
@@ -212,9 +206,7 @@ An id for the editor. Used for retrieving the editor instance using the `+tinymc
 
 [source,html]
 ----
-<editor
-  id="uuid"
-></editor>
+<editor id="uuid" />
 ----
 
 [[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'
   }"
-></editor>
+/>
 ----
 
 [[initialvalue]]
@@ -253,15 +245,13 @@ Initial content of the editor when the editor is initialized.
 
 [source,html]
 ----
-<editor
-  initialValue="Once upon a time..."
-></editor>
+<editor initialValue="Once upon a time..." />
 ----
 
 [[inline]]
 === `+inline+`
 
-Used to set the editor to inline mode. Using `+<editor [inline]="true"></editor>+` is the same as setting `+{inline: true}+` in the {productname} selector (`+tinymce.init+`).
+Used to set the editor to inline mode. Using `+<editor [inline]="true" />+` 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]
 ----
-<editor
-  [inline]="true"
-></editor>
+<editor [inline]="true" />
 ----
 
 [[plugins]]
 === `+plugins+`
 
-Used to include plugins for the editor. Using `+<editor plugins="lists code"></editor>+` is the same as setting `+{plugins: 'lists code'}+` in the {productname} selector (`+tinymce.init+`).
+Used to include plugins for the editor. Using `+<editor plugins="lists code" />+` 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]
 ----
-<editor
-  plugins="lists code"
-></editor>
+<editor plugins="lists code" />
 ----
 
 [[outputformat]]
@@ -313,15 +299,13 @@ Used to specify the format of the content emitted by the `+tinymce-angular+` com
 
 [source,html]
 ----
-<editor
-  outputFormat="text"
-></editor>
+<editor outputFormat="text" />
 ----
 
 [[tagname]]
 === `+tagName+`
 
-Only valid when xref:inline[`+<editor [inline]="true"></editor>+`]. Used to define the HTML element for the editor in inline mode.
+Only valid when xref:inline[`+<editor [inline]="true" />+`]. Used to define the HTML element for the editor in inline mode.
 
 *Type:* `+String+`
 
@@ -334,13 +318,13 @@ Only valid when xref:inline[`+<editor [inline]="true"></editor>+`]. Used to defi
 <editor
   [inline]="true"
   tagName="my-custom-tag"
-></editor>
+/>
 ----
 
 [[toolbar]]
 === `+toolbar+`
 
-Used to set the toolbar for the editor. Using `+<editor toolbar="bold italic"></editor>+` is the same as setting `+{toolbar: 'bold italic'}+` in the {productname} selector (`+tinymce.init+`).
+Used to set the toolbar for the editor. Using `+<editor toolbar="bold italic" />+` 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
 <editor
   plugins="code"
   toolbar="bold italic underline code"
-></editor>
+/>
 ----
 
 [[using-the-ngmodel-directive]]
@@ -365,10 +349,10 @@ The `+ngModel+` directive can be added to use the editor in a form:
 
 [source,html]
 ----
-<editor [(ngModel)]="dataModel"></editor>
+<editor [(ngModel)]="dataModel" />
 ----
 
-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]
 ----
-<editor
-  modelEvents="change input nodechange undo redo"
-></editor>
+<editor modelEvents="change input nodechange undo redo" />
 ----
 
 [[using-with-reactive-forms]]
@@ -402,10 +384,10 @@ To use {productname} Angular component with reactive forms:
 +
 [source,html]
 ----
-<editor [formControlName]="schema.key" [init]="{plugins: 'link'}"></editor>
+<editor [formControlName]="schema.key" [init]="{plugins: 'link'}" />
 ----
 
-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]
 ----
-<editor (onSelectionChange)="handleEvent($event)"></editor>
+<editor (onSelectionChange)="handleEvent($event)" />
 ----
 
 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]
 ----
-<editor
-  allowedEvents="onMouseDown,onKeyDown"
-></editor>
+<editor allowedEvents="onMouseDown,onKeyDown" />
 ----
 
 [[ignoreevents]]
@@ -537,7 +517,5 @@ Used to block a list of events from the `+tinymce-angular+` component.
 
 [source,html]
 ----
-<editor
-  ignoreEvents="onMouseEnter,onMouseLeave,onMouseOut,onMouseMove"
-></editor>
+<editor ignoreEvents="onMouseEnter,onMouseLeave,onMouseOut,onMouseMove" />
 ----