Skip to content
roosterjs library for angular!!
TypeScript JavaScript HTML CSS
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e initial commit May 1, 2019
projects/ng-rooster new version May 9, 2019
src isNull function bug May 9, 2019
.editorconfig initial commit May 1, 2019
.gitignore initial commit May 1, 2019 Readme updated with css parameters in the editor Aug 17, 2019
angular.json First commit May 1, 2019
package-lock.json isNull function bug May 9, 2019
package.json First commit May 1, 2019
tsconfig.json First commit May 1, 2019
tslint.json initial commit May 1, 2019


ng-rooster is wrapper to roosterjs, an open source library created by Microsoft:

Getting Started


npm i @instechnologies/ng-rooster

How to Use it

The first thing to do after installing the library is to add the module to ypour app.module.ts or other module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgRoosterModule } from '@instechnologies/ng-rooster';

  declarations: [
  imports: [
    NgRoosterModule, //import the NgRoosterModule
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

After importing the module you have two ways to create the editor

  • Using the rooster-editor directive.
  • Using the rooster-editor-box component.

The most high level and most easy to use method is using the rooster-editor-box component:

  <rooster-editor-box style="width: 500px; height: 500px"></rooster-editor-box>

Easy as that, but what about some controls and how do we get the content, well this component maps the inputs to the roosterjs api, for example if we want to know the text size we can simply do:

   <rooster-editor-box style="width: 500px; height: 500px" [(fontSize)]="fontSize" ></rooster-editor-box>

to toggle bold(toggleBold) for example we need to use a different approach but still very easy. We have to use a Subject to notify the editor when to bold:



 bold$ = new Subject<void>()



   <button (click)="bold$.next(0)">Bold</button>
   <rooster-editor-box [toggleBold$]="bold$"></rooster-editor-box>

finally to retrive the content

  <rooster-editor-box [(ngModel)]="content" ></rooster-editor-box>

And Yessss rooster-editor-box is just a normal input and we can use ngModel as we use it in other kinds of inputs.

This project was generated with Angular CLI version 7.1.4.

You can’t perform that action at this time.