---
title: Angular Jodit Component
description: Angular wrapper for Jodit WYSIWYG editor. Installation and usage.
keywords: angular jodit, angular editor, jodit-angular
---

# Angular Component Jodit WYSIWYG

[![npm](https://img.shields.io/npm/v/jodit-angular.svg)](https://www.npmjs.com/package/jodit-angular)
[![npm](https://img.shields.io/npm/dm/jodit-angular.svg)](https://www.npmjs.com/package/jodit-angular)
[![npm](https://img.shields.io/npm/l/jodit-angular.svg)](https://www.npmjs.com/package/jodit-angular)

- [Github](https://github.com/jodit/jodit-angular)

This package is a wrapper around [Jodit](https://xdsoft.net/jodit/) to make it easier to use in a Angular application.

## for contributors

The editor component itselt is located in the `jodit-angular` folder and packaged into a redistributable package with the [ng-packagr](https://www.npmjs.com/package/ng-packagr) tool. A test app has been created with the @angular/cli. It is located in the src directory and a dev server can be started by using the `npm start` command.

## Installation

```bash
$ npm install jodit-angular
```

## Usage

### Loading the Component

Import the EditorModule from the npm package like so:

```typescript
import { JoditAngularModule } from 'jodit-angular';
```

Then add it to your application module:

```typescript
// Your setup might differ, but the important part is the imports array
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
JoditAngularModule // <- Crucial part
],
providers: [],
bootstrap: [AppComponent]
})
```

Using the Component in Your Templates
You can use the editor in your templates as follows:

```html
<jodit-editor [config]="{buttons: 'bold'}"></jodit-editor>
```

In the config, you can set all [Jodit's options](https://xdsoft.net/jodit/play.html)

## Event Binding

You can bind editor events via a shorthand prop on the editor, like so:

```html
<jodit-editor (onChange)="handleEvent($event)"></jodit-editor>
```

The handler is called with an object containing the properties event (the event object) and editor (a reference to the editor).

## License

This package is available under `MIT` License.