{"id":24799234,"url":"https://github.com/hrueger/ngx-onlyoffice","last_synced_at":"2025-07-24T22:08:23.874Z","repository":{"id":36471973,"uuid":"224100377","full_name":"hrueger/ngx-onlyoffice","owner":"hrueger","description":"An OnlyOffice wrapper library for Angular.","archived":false,"fork":false,"pushed_at":"2022-12-04T22:04:16.000Z","size":1883,"stargazers_count":7,"open_issues_count":12,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-05T23:05:13.236Z","etag":null,"topics":["angular","editor","ngx","onlyoffice","wysiwyg"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hrueger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"hrueger","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-11-26T04:12:59.000Z","updated_at":"2024-03-20T11:38:42.000Z","dependencies_parsed_at":"2023-01-17T01:48:23.027Z","dependency_job_id":null,"html_url":"https://github.com/hrueger/ngx-onlyoffice","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hrueger/ngx-onlyoffice","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hrueger%2Fngx-onlyoffice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hrueger%2Fngx-onlyoffice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hrueger%2Fngx-onlyoffice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hrueger%2Fngx-onlyoffice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hrueger","download_url":"https://codeload.github.com/hrueger/ngx-onlyoffice/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hrueger%2Fngx-onlyoffice/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260150996,"owners_count":22966427,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","editor","ngx","onlyoffice","wysiwyg"],"created_at":"2025-01-30T02:17:32.262Z","updated_at":"2025-06-16T11:34:39.306Z","avatar_url":"https://github.com/hrueger.png","language":"TypeScript","funding_links":["https://github.com/sponsors/hrueger"],"categories":[],"sub_categories":[],"readme":"# `ngx-onlyoffice`\n![Available on npm](https://img.shields.io/npm/v/ngx-onlyoffice)\n[![License](https://img.shields.io/badge/License-MIT-blue)](./LICENSE)\n[![GitHub last commit](https://img.shields.io/github/last-commit/hrueger/ngx-onlyoffice?color=brightgreen)](https://github.com/hrueger/ngx-onlyoffice/commits)\n[![Maintenance](https://img.shields.io/maintenance/yes/2021)](https://github.com/hrueger/ngx-onlyoffice/commits)\n[![Dependabot Status](https://api.dependabot.com/badges/status?host=github\u0026repo=hrueger/ngx-onlyoffice)](https://dependabot.com)\n\nThis ONLYOFFICE wrapper for Angular displays the ONLYOFFICE viewer or editor in your Angular application.\n\nNote, that you have to host the server yourself.\n\n## Installation\nType `npm i ngx-onlyoffice` in your command prompt.\n\n## Usage\nSee below or refer to the [example](https://github.com/hrueger/ngx-onlyoffice/tree/master/projects/example/src/app).\n\nInclude the module in `your app.module.ts`.\n```typescript\nimport { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { NgxOnlyOfficeModule } from \"ngx-onlyoffice\";  // \u003c-- here\nimport { AppRoutingModule } from \"./app-routing.module\";\nimport { AppComponent } from \"./app.component\";\n\n@NgModule({\n  bootstrap: [AppComponent],\n  declarations: [\n    AppComponent,\n    ...\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    NgxOnlyOfficeModule, // \u003c-- and here\n    ...\n  ],\n  providers: [],\n})\nexport class AppModule { }\n```\n\nUse in your template:\n```html\n\u003conlyoffice [config]=\"myConfig\"\u003e\u003c/onlyoffice\u003e\n```\n\nAn example config:\n```typescript\npublic myConfig = {\n    /*\n        editorConfig is the original config for onlyoffice, see docs under https://api.onlyoffice.com/editors/config/document\n    */\n    editorConfig: { \n      document: {\n        fileType: \"docx\",\n        info: {\n          author: \"Me\",\n          created: \"26.11.19\",\n        },\n        key: \"3277238458\",\n        permissions: {\n          download: true,\n          edit: true,\n        },\n        title: \"TestTitle\",\n        url: \"example.com\",\n      },\n      documentType: \"text\",\n      editorConfig: {\n        embedded: {\n          embedUrl: \"example.com\",\n          saveUrl: \"example.com\",\n          shareUrl: \"example.com\",\n          toolbarDocked: \"top\",\n        },\n        lang: \"en\",\n        mode: \"edit\",\n      },\n      events: {\n        onBack: console.log,\n        onDocumentStateChange: console.log,\n        onError: console.log,\n        onReady: console.log,\n        onRequestEditRights: console.log,\n        onSave: console.log,\n      },\n      height: \"100%\",\n      type: \"desktop\",\n      width: \"100%\",\n    },\n    script: \"https://office.example-server/web-apps/apps/api/documents/api.js\", // \u003c-- This is the api script URL.\n  };\n```\n\n## Config Changes\nWhen you change the config, the editor will reload automatically. For this to work, you need to **replace the entire config object**. Just changing one property won't trigger a reload. Example:\n```TypeScript\n// wrong\nthis.config.editorConfig.document.title = \"New Title\";\n\n// right\nthis.config = {\n  editorConfig: {\n    document: {\n      title: \"New title\",\n      ...\n    },\n    ...\n  },\n  ...\n}\n```\nNote that here you have to specify the whole configuration object, just some properties won't work.\n\nHowever, if you just want to change some properties, you can use `Object.assign` like so:\n```TypeScript\nthis.config = Object.assign({}, this.config, {\n    editorConfig: {\n        title: \"New Title\"\n    }\n})\n```\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhrueger%2Fngx-onlyoffice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhrueger%2Fngx-onlyoffice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhrueger%2Fngx-onlyoffice/lists"}