---
title: "Using the TinyMCE package with the Angular framework"
description: "A guide on integrating the TinyMCE package into the Angular framework."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/angular-pm/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/angular-pm/index.md"
version: "7"
last_updated: "2025-05-14T11:52:46Z"
tokens: 1444
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/angular-pm/).
# Using the TinyMCE package with the Angular framework

The [Official TinyMCE Angular component](https://github.com/tinymce/tinymce-angular) integrates TinyMCE into Angular projects. This procedure creates a [basic Angular application](https://angular.dev/tools/cli/setup-local) containing a TinyMCE editor.

This procedure uses standalone components. If using Angular Modules, see [Angular Modules](#angular-modules).

For examples of the TinyMCE Angular integration, visit [the tinymce-angular storybook](https://tinymce.github.io/tinymce-angular/).

## Prerequisites

This procedure requires [Node.js (and npm)](https://nodejs.org/).

## Procedure

1. On a command line or command prompt, install the [Angular CLI Tool](https://angular.dev/tools/cli) package.

```sh
npm install -g @angular/cli
```
2. Create a new Angular project named `tinymce-angular-demo`.

```sh
ng new --defaults --skip-git tinymce-angular-demo
```
3. Change into the newly created directory.

```sh
cd tinymce-angular-demo
```
4. Install the `tinymce` and `tinymce-angular` packages.

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

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

@Component({
  selector: 'app-root',
  imports: [EditorComponent],
  template: `
  <h1>TinyMCE 7 Angular Demo</h1>
  <editor
    [init]="init"
  />
  `
})
export class AppComponent {
  init: EditorComponent['init'] = {
    plugins: 'lists link image table code help wordcount'
  };
}
```
6. Using a text editor; open `angular.json` and add TinyMCE to the `assets` property.

```json
"assets": [
  { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
]
```
7. Load TinyMCE.

  - To load TinyMCE when the editor is initialized (also known as lazy loading), add a dependency provider to the component using the `TINYMCE_SCRIPT_SRC` token.

```ts
import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
/* ... */
@Component({
  /* ... */
  standalone: true,
  imports: [EditorComponent],
  providers: [
    { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }
  ]
})
```
  - To load TinyMCE when the page or application is loaded:

    1. Open `angular.json` and add TinyMCE to the *global scripts* tag.

```json
"scripts": [
  "node_modules/tinymce/tinymce.min.js"
]
```
    2. Update the editor configuration to include the `base_url` and `suffix` options.

```ts
export class AppComponent {
  /* ... */
  init: EditorComponent['init'] = {
    /* ... */
    base_url: '/tinymce', // Root for resources
    suffix: '.min'        // Suffix to use when loading resources
  };
}
```
8. Test the application using the Angular development server.

  - To start the development server, navigate to the `tinymce-angular-demo` directory and run:

```sh
ng serve --open
```
  - To stop the development server, select on the command line or command prompt and press *Ctrl+C*.

## Bundling TinyMCE with an Angular application

> **Important:** Tiny does not recommend bundling `tinymce` and `tinymce-angular` with a module loader. Bundling these packages can be complex and error prone.
To bundle TinyMCE using a module loader (such as Webpack, Rollup, or Browserify), import or require the `tinymce` package, followed by the `tinymce-angular` package, then the other required TinyMCE-related imports.

Example of bundling:

```js
/* Add the tinymce-angular wrapper to the bundle */
import { Editor } from '@tinymce/tinymce-angular';
/* For instructions on bundling TinyMCE, see the Bundling TinyMCE documentation. */
```
For instructions on bundling TinyMCE, see: [Bundling TinyMCE](../introduction-to-bundling-tinymce/).

## Deploying the application to a HTTP server

The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: [Angular Docs - Building Angular Apps](https://angular.dev/tools/cli/build) or [Angular Docs - Deployment](https://angular.dev/tools/cli/deployment).

To deploy the application to a local HTTP Server:

1. Navigate to the `tinymce-angular-demo` directory and run:

```sh
ng build
```
2. 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.

> **Note:** Additional configuration is required to deploy the application outside the web server root directory, such as http://localhost:<port>/my_angular_application.

## Angular Modules

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

```ts
import { NgModule } from '@angular/core';
import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';

@NgModule({
  /* ... */
  imports: [
    EditorModule
  ],
  providers: [
    // If you're self hosting and lazy loading TinyMCE from node_modules:
    { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }
  ],
  /* ... */
})
export class MyModule {}
```

## Next Steps

- For examples of the TinyMCE integration, see: [the tinymce-angular storybook](https://tinymce.github.io/tinymce-angular/).
- For information on customizing:

  - TinyMCE integration, see: [Angular framework Technical Reference](../angular-ref/).
  - TinyMCE, see: [Basic setup](../basic-setup/).
  - The Angular application, see: [the Angular documentation](https://angular.dev/).