 [](./LICENSE) [](https://git
npm install ngx-onlyofficengx-onlyofficeThis ONLYOFFICE wrapper for Angular displays the ONLYOFFICE viewer or editor in your Angular application.
Note, that you have to host the server yourself.
npm i ngx-onlyoffice in your command prompt.Include the module in your app.module.ts.
``typescript
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { NgxOnlyOfficeModule } from "ngx-onlyoffice"; // <-- here
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
AppRoutingModule,
NgxOnlyOfficeModule, // <-- and here
...
],
providers: [],
})
export class AppModule { }
`
Use in your template:
`html`
An example config:
`typescript`
public myConfig = {
/*
editorConfig is the original config for onlyoffice, see docs under https://api.onlyoffice.com/editors/config/document
*/
editorConfig: {
document: {
fileType: "docx",
info: {
author: "Me",
created: "26.11.19",
},
key: "3277238458",
permissions: {
download: true,
edit: true,
},
title: "TestTitle",
url: "example.com",
},
documentType: "text",
editorConfig: {
embedded: {
embedUrl: "example.com",
saveUrl: "example.com",
shareUrl: "example.com",
toolbarDocked: "top",
},
lang: "en",
mode: "edit",
},
events: {
onBack: console.log,
onDocumentStateChange: console.log,
onError: console.log,
onReady: console.log,
onRequestEditRights: console.log,
onSave: console.log,
},
height: "100%",
type: "desktop",
width: "100%",
},
script: "https://office.example-server/web-apps/apps/api/documents/api.js", // <-- This is the api script URL.
};
TypeScript
// wrong
this.config.editorConfig.document.title = "New Title";// right
this.config = {
editorConfig: {
document: {
title: "New title",
...
},
...
},
...
}
`
Note that here you have to specify the whole configuration object, just some properties won't work.However, if you just want to change some properties, you can use
Object.assign like so:
`TypeScript
this.config = Object.assign({}, this.config, {
editorConfig: {
title: "New Title"
}
})
``