---
title: "Using the TinyMCE .zip package with the Angular framework"
description: "A guide on integrating a .zip version of TinyMCE into the Angular framework."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/angular-zip/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/angular-zip/index.md"
version: "7"
last_updated: "2025-05-14T11:52:46Z"
tokens: 1173
---
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-zip/).
# Using the TinyMCE .zip 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-angular` package.
```sh
npm install @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: `
TinyMCE 7 Angular Demo
`
})
export class AppComponent {
init: EditorComponent['init'] = {
plugins: 'lists link image table code help wordcount'
};
}
```
6. 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 `` or the end of the `` of the HTML file, such as:
```html
```
- Bundling TinyMCE with the Angular application using a module loader (such as Webpack).
> **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/).
7. 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*.
## 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:/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 } from '@tinymce/tinymce-angular';
@NgModule({
/* ... */
imports: [
EditorModule
],
/* ... */
})
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/).