---
title: "Using TinyMCE from the Tiny Cloud CDN with the Angular framework"
description: "A guide on integrating TinyMCE from the Tiny Cloud into the Angular framework."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/angular-cloud/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/angular-cloud/index.md"
version: "6"
last_updated: "2022-04-07T05:31:36Z"
tokens: 886
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/angular-cloud/).
# Using TinyMCE from the Tiny Cloud CDN 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.io/guide/setup-local) containing a TinyMCE editor.

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.io/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 and save it to your `package.json` with `--save`.

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

```ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { EditorModule } from '@tinymce/tinymce-angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    EditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
6. Using a text editor, open `/path/to/tinymce-angular-demo/src/app/app.component.html` and replace the contents with:

```tsx
<h1>TinyMCE 6 Angular Demo</h1>
<editor
  [init]="{ plugins: 'lists link image table code help wordcount' }"
></editor>
```
7. Include the `apiKey` option in the editor element and include your [Tiny Cloud API key](/auth/signup/). Such as:

```tsx
<editor apiKey="your-api-key" [init]={ /* your other settings */ } ></editor>
```
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*.

## 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 and serving Angular apps](https://angular.io/guide/build) or [Angular Docs - Deployment](https://angular.io/guide/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` 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.

## 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.io/docs).