{"id":13808461,"url":"https://github.com/insurance-technologies/ng-rooster","last_synced_at":"2025-05-14T02:31:53.058Z","repository":{"id":34865747,"uuid":"184435615","full_name":"insurance-technologies/ng-rooster","owner":"insurance-technologies","description":"roosterjs library for angular!!","archived":false,"fork":false,"pushed_at":"2023-01-05T01:30:34.000Z","size":580,"stargazers_count":12,"open_issues_count":28,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-10T18:03:53.665Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/insurance-technologies.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-01T15:16:33.000Z","updated_at":"2023-08-26T06:42:00.000Z","dependencies_parsed_at":"2023-01-15T09:41:55.378Z","dependency_job_id":null,"html_url":"https://github.com/insurance-technologies/ng-rooster","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insurance-technologies%2Fng-rooster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insurance-technologies%2Fng-rooster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insurance-technologies%2Fng-rooster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insurance-technologies%2Fng-rooster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/insurance-technologies","download_url":"https://codeload.github.com/insurance-technologies/ng-rooster/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273240,"owners_count":17448073,"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":[],"created_at":"2024-08-04T01:01:43.371Z","updated_at":"2024-11-19T00:30:46.894Z","avatar_url":"https://github.com/insurance-technologies.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# ng-rooster\nng-rooster is wrapper to roosterjs, an open source library created by Microsoft: https://github.com/Microsoft/roosterjs. \n\n# Getting Started\n\n## Installation\n``` npm i @instechnologies/ng-rooster ```\n\n## How to Use it\n\nThe first thing to do after installing the library is to add the module to ypour app.module.ts or other module\n\n```ts\n\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { NgRoosterModule } from '@instechnologies/ng-rooster';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    NgRoosterModule, //import the NgRoosterModule\n    FormsModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n\n```\n\nAfter importing the module you have two ways to create the editor\n\n* Using the rooster-editor directive.\n* Using the rooster-editor-box component.\n\nThe most high level and most easy to use method is using the rooster-editor-box component:\n\n```html\n\n  \u003crooster-editor-box style=\"width: 500px; height: 500px\"\u003e\u003c/rooster-editor-box\u003e\n\n```\n\nEasy as that, but what about some controls and how do we get the content, well\nthis component maps the inputs to the roosterjs api, for example if we want to know the text size we can simply do:\n\n```html\n   \n   \u003crooster-editor-box style=\"width: 500px; height: 500px\" [(fontSize)]=\"fontSize\" \u003e\u003c/rooster-editor-box\u003e\n\n```\n\nto 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:\n\ncomponent:\n```ts\n   \n//--------------------------------------------------------------------\n\n bold$ = new Subject\u003cvoid\u003e()\n\n//--------------------------------------------------------------------\n\n```\n\ntemplate:\n\n```html\n\n   \u003cbutton (click)=\"bold$.next(0)\"\u003eBold\u003c/button\u003e\n  \n   \u003crooster-editor-box [toggleBold$]=\"bold$\"\u003e\u003c/rooster-editor-box\u003e\n\n```\n\nfinally to retrive the content\n\n```html\n\n  \u003crooster-editor-box [(ngModel)]=\"content\" \u003e\u003c/rooster-editor-box\u003e\n\n```\n\n### And Yessss rooster-editor-box is just a normal input and we can use ngModel as we use it in other kinds of inputs.\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.1.4.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsurance-technologies%2Fng-rooster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finsurance-technologies%2Fng-rooster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsurance-technologies%2Fng-rooster/lists"}