Using the TinyMCE .zip package with the Angular framework

The Official TinyMCE Angular component integrates TinyMCE into Angular projects. This procedure creates a basic Angular application containing a TinyMCE editor.

This procedure uses standalone components. If using Angular Modules, see Angular Modules.

For examples of the TinyMCE Angular integration, visit the tinymce-angular storybook.

Prerequisites

This procedure requires Node.js (and npm).

Procedure

On a command line or command prompt, install the Angular CLI Tool package.
```
npm install -g @angular/cli
```
Create a new Angular project named tinymce-angular-demo.
```
ng new --defaults --skip-git tinymce-angular-demo
```
Change into the newly created directory.
```
cd tinymce-angular-demo
```
Install the tinymce-angular package.
```
npm install @tinymce/tinymce-angular
```

Using a text editor, open /path/to/tinymce-angular-demo/src/app/app.component.ts and replace the contents with:

import { Component } from '@angular/core';
import { EditorComponent } from '@tinymce/tinymce-angular';

@Component({
  selector: 'app-root',
  imports: [EditorComponent],
  template: `
  <h1>TinyMCE 8 Angular Demo</h1>
  <editor
    [init]="init"
    licenseKey="gpl"
  />
  `
})
export class AppComponent {
  init: EditorComponent['init'] = {
    plugins: 'lists link image table code help wordcount'
  };
}

Add the tinymce global to the application by: Deploying TinyMCE independent of the Angular application, or bundling TinyMCE with the Angular application.
- Deploy TinyMCE independent of the Angular application
  
  To use an independent deployment of TinyMCE, add a script to either the <head> or the end of the <body> of the HTML file, such as:
  <script src="/path/to/tinymce.min.js"></script>
Run ng serve to start a dev server
```
ng serve
```

Angular Modules

EditorModule is available to import from @tinymce/tinymce-angular. Which should be included in your my.module.ts file.

import { NgModule } from '@angular/core';
import { EditorModule } from '@tinymce/tinymce-angular';

@NgModule({
  /* ... */
  imports: [
    EditorModule
  ],
  /* ... */
})
export class MyModule {}

Next Steps

For examples of the TinyMCE integration, see: the tinymce-angular storybook.
For information on customizing:
- TinyMCE integration, see: Angular framework Technical Reference.
- TinyMCE, see: Basic setup.
- The Angular application, see: the Angular documentation.