Using TinyMCE from Tiny Cloud in Angular

This guide shows how to integrate TinyMCE from Tiny Cloud into an Angular application using the TinyMCE Angular component.

The steps below use standalone components. If using Angular Modules, see Angular Modules.

Prerequisites

This procedure requires Node.js (and NPM).

Procedure

From a terminal or command prompt, install the Angular CLI Tool globally.
```
npm install -g @angular/cli
```
Create a new Angular project named tinymce-angular-demo using default settings and without Git initialization.
```
ng new --defaults --skip-git tinymce-angular-demo
```

Navigate into the project directory and install tinymce-angular.

cd tinymce-angular-demo && npm install @tinymce/tinymce-angular

Update the root component app.component.ts to import EditorComponent component.

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"
    apiKey="no-api-key"
  />
  `
})
export class AppComponent {
  init: EditorComponent['init'] = {
    plugins: 'lists link image table code help wordcount'
  };
}

Update the apiKey with your own Tiny Cloud API key.
Run the Angular a development server
```
ng serve
```

Other resources

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