This component enables users to build ONLYOFFICE Docs user interface using Angular.
Install ONLYOFFICE Docs Angular component from npm in your project. Run:
npm install --save @onlyoffice/document-editor-angular
or
yarn add @onlyoffice/document-editor-angular
Follow the steps below to start using the component:
Import the DocumentEditorModule:
import { NgModule } from '@angular/core'; import { DocumentEditorModule } from "@onlyoffice/document-editor-angular"; @NgModule({ declarations: [ AppComponent ], imports: [ DocumentEditorAngularModule ], bootstrap: [AppComponent] }) export class AppModule { }
Define 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"); }; }
where the example.com is the name of the server where document manager and document storage service are installed.
In template, use the document-editor component with your options:
<document-editor id="docxForComments" documentServerUrl="http://documentserver/" [config]="config" [events_onDocumentReady]="onDocumentReady" ></document-editor>
where the documentserver is the name of the server with ONLYOFFICE Docs installed.
Name | Type | Default | Description |
id* | string | null | Component unique identifier. |
documentServerUrl* | string | null | Address of ONLYOFFICE Document Server. |
config* | object | null | Generic configuration object for opening a file with token. |
document_fileType | string | null | The type of the file. |
document_title | string | null | The file name. |
documentType | string | null | The document type. |
height | string | null | Defines the document height in the browser window. |
type | string | null | Defines the platform type used to access the document (desktop, mobile or embedded). |
width | string | null | Defines the document width in the browser window. |
events_onAppReady | (event: object) => void | null | The function called when the application is loaded into the browser. |
events_onDocumentStateChange | (event: object) => void | null | The function called when the document is modified. |
events_onMetaChange | (event: object) => void | null | The function called when the meta information of the document is changed via the meta command. |
events_onDocumentReady | (event: object) => void | null | The function called when the document is loaded into the document editor. |
events_onInfo | (event: object) => void | null | The function called when the application opened the file. |
events_onWarning | (event: object) => void | null | The function called when a warning occurs. |
events_onError | (event: object) => void | null | The function called when an error or some other specific event occurs. |
events_onRequestSharingSettings | (event: object) => void | null | The function called when the user is trying to manage document access rights by clicking Change access rights button. |
events_onRequestRename | (event: object) => void | null | The function called when the user is trying to rename the file by clicking the Rename... button. |
events_onMakeActionLink | (event: object) => void | null | The function called when the user is trying to get link for opening the document which contains a bookmark, scrolling to the bookmark position. |
events_onRequestInsertImage | (event: object) => void | null | The function called when the user is trying to insert an image by clicking the Image from Storage button. |
events_onRequestSaveAs | (event: object) => void | null | The function called when the user is trying to save file by clicking Save Copy as... button. |
events_onRequestMailMergeRecipients | (event: object) => void | null | The function called when the user is trying to select recipients data by clicking the Mail merge button. |
events_onRequestCompareFile | (event: object) => void | null | The function called when the user is trying to select document for comparing by clicking the Document from Storage button. |
events_onRequestEditRights | (event: object) => void | null | The function called when the user is trying to switch the document from the viewing into the editing mode by clicking the Edit Document button. |
events_onRequestHistory | (event: object) => void | null | The function called when the user is trying to show the document version history by clicking the Version History button. |
events_onRequestHistoryClose | (event: object) => void | null | The function called when the user is trying to go back to the document from viewing the document version history by clicking the Close History button. |
events_onRequestHistoryData | (event: object) => void | null | The function called when the user is trying to click the specific document version in the document version history. |
events_onRequestRestore | (event: object) => void | null | The function called when the user is trying to restore the file version by clicking the Restore button in the version history. |
Clone project from the GitHub repository:
git clone https://github.com/ONLYOFFICE/document-editor-angular-workspace.git
Install the project dependencies:
npm install
Build the project:
cd ./projects ng build @onlyoffice/document-editor-angular
Create the package:
cd ./dist/onlyoffice/document-editor-angular npm pack
Test the component:
cd ./projects ng test @onlyoffice/document-editor-angular
In case you have any issues, questions, or suggestions for the ONLYOFFICE Docs Angular component, please refer to the Issues section.