How To Deploy ONLYOFFICE Docs On Angular

Angular is a TypeScript-based free and open-source front-end application development framework widely used for building native mobile applications and creating desktop-installed apps for Linux, Windows, and macOS.

If you develop and run Angular-based applications, it might be a good idea to enable document editing and real-time collaboration within your service by integrating ONLYOFFICE Docs (ONLYOFFICE Document Server). Such integration is possible due to a unique component developed for the Angular framework by the ONLYOFFICE developers.

When integrated, the component allows you to install the ONLYOFFICE online editors and test their performance within your Angular environment. Here is how you can do it.

About ONLYOFFICE Docs

ONLYOFFICE Docs is a web-based office package that allows you to work with text documents, spreadsheets, presentations, fillable forms, and PDF files in your web browser.

The solution is open-source and requires on-premises deployment on a local server. For example, it can be installed on Debian and Ubuntu or other Linux-based distros.

ONLYOFFICE Docs offers a user-friendly interface and a complete set of features so that you can easily open and edit text documents, spreadsheets, presentations, and fillable forms of any complexity. The suite is completely compatible with Microsoft Word, Excel, and PowerPoint files and supports other popular formats, including ODF.

You can use the ONLYOFFICE suite within ONLYOFFICE Workspace, an open-source platform for collaborative work and team management, or integrate it with another web-based app or platform.

For example, you can integrate ONLYOFFICE Docs with Nextcloud, Moodle, Confluence, ownCloud, WordPress, Seafile, SharePoint, Alfresco, Redmine, and so on. The total number of available integrations is more than 30.

For ONLYOFFICE Docs, there is a free desktop app for Windows, Linux, and macOS, which allows you to work with documents offline, and free mobile apps for Android and iOS.

ONLYOFFICE Docs provides open API and is compatible with the WOPI protocol, so software developers can easily embed the suite into their software tools. For this purpose, there is a special version called ONLYOFFICE Docs Developer Edition.

Install Angular Component for ONLYOFFICE Document Server

First of all, you need to have ONLYOFFICE Docs (ONLYOFFICE Document Server) installed on your server. You can get it from GitHub using the corresponding installation instructions.

The ONLYOFFICE component for the Angular framework is available in the npm Registry. That’s why you need to install it from npm with this command:

$ npm install --save @onlyoffice/document-editor-angular

Installation of the component using yarn is also possible. Just run this command:

$ yarn add @onlyoffice/document-editor-angular

How to Use Angular Component in ONLYOFFICE Docs

After successful installation, you need to import DocumentEditorModule:

import { NgModule } from '@angular/core';
import { DocumentEditorModule } from "@onlyoffice/document-editor-angular";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    DocumentEditorAngularModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

After that, you need to define the following options in your consuming component:

@Component({...})
export class ExampleComponent {
  config: IConfig = {
    document: {
      "fileType": "docx",
      "key": "Khirz6zTPdfd7",
      "title": "Example Document Title.docx",
      "url": "https://example.com/url-to-example-document.docx"
    },
    documentType: "word",
    editorConfig: {
      "callbackUrl": "https://example.com/url-to-callback.ashx"
    },
  }

  onDocumentReady = (event) => {
    console.log("Document is loaded");
  };
}

The next step is to use the document-editor component with the options in your template:

<document-editor 
  id="docxForComments" 
  documentServerUrl="http://documentserver/"
  [config]="config"
  [events_onDocumentReady]="onDocumentReady"
></document-editor>

A full description of all available options is available at document-editor-angular.

Further Development

Then install all the required project dependencies:

$ npm install

The next step is to build the project itself:

$ cd ./projects
$ ng build @onlyoffice/document-editor-angular

Create the project package:

$ cd ./dist/onlyoffice/document-editor-angular
$ npm pack

Finally, test the ONLYOFFICE component:

$ cd ./projects
$ ng test @onlyoffice/document-editor-angular

That’s it! Now you can see how ONLYOFFICE Docs works within your Angular app.