Documentation / Get Started

Angular setup

Redactor can work with Angular. Here are instructions on how to do it step by step.

You can download a sample application that is described in these instructions.

Download Redactor Angular Demo

Note: Don't forget to add the Redactor itself (css & js) to your application, for example in src/redactor.

Step 1: Creating a RedactorComponent #

Create a new RedactorComponent using the Angular CLI in your project folder:

ng generate component redactor

Step 2: Edit RedactorComponent template #

Open the redactor.component.html file and add some basic HTML:

<!-- redactor.component.html -->
<div class="redactor-container">
  <p>Redactor is working!</p>
  <textarea id="entry"></textarea>

Step 3: Edit RedactorComponent #

Replace the redactor.component.ts code with the following. Of course, you can make various modifications to this code. Run the editor with the settings as described in the editor documentation.

// redactor.component.ts
import { Component, AfterViewInit, OnDestroy } from '@angular/core';

declare let Redactor: any;

  selector: 'redactor',
  templateUrl: './redactor.component.html',
  styleUrls: ['./redactor.component.css']
export class RedactorComponent implements AfterViewInit, OnDestroy {

  private app:any;

  ngAfterViewInit(): void { = Redactor('#entry');

  ngOnDestroy(): void {;

Step 4: Using a RedactorComponent in an AppComponent #

Now insert the RedactorComponent selector (redactor) into the AppComponent template (app.component.html):

<!-- app.component.html -->
  <h1>Welcome to {{ title }}!</h1>

Step 5: Edit angular.json #

Make changes to angular.json or connect the Redactor file directly into your project's index.html.

// angular.json
"styles": [
"scripts": [

Step 6: Declare RedactorComponent in app.module.ts #

Declare the Redactor component in the app.module.ts of your application.

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { RedactorComponent } from './redactor/redactor.component'; // Make sure the path to the component is correct

  declarations: [
    RedactorComponent // Declaration of RedactorComponent in the module
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Step 7: Launch your application #

Run your application using the Angular CLI:

ng serve