{"id":20398902,"url":"https://github.com/unlayer/angular-email-editor","last_synced_at":"2025-05-16T06:06:36.198Z","repository":{"id":37791173,"uuid":"156020098","full_name":"unlayer/angular-email-editor","owner":"unlayer","description":"Drag-n-Drop Email Editor Component for Angular","archived":false,"fork":false,"pushed_at":"2025-02-26T16:15:58.000Z","size":1648,"stargazers_count":209,"open_issues_count":94,"forks_count":171,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-04-08T16:04:30.017Z","etag":null,"topics":["angular","angular-components","builder","drag-and-drop","email-marketing","email-template","html-emails","template"],"latest_commit_sha":null,"homepage":"https://unlayer.com","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/unlayer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-03T20:13:15.000Z","updated_at":"2025-04-02T06:27:30.000Z","dependencies_parsed_at":"2024-06-14T05:46:16.442Z","dependency_job_id":"b6edf70a-f18e-486a-8e6a-acc3800202cd","html_url":"https://github.com/unlayer/angular-email-editor","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/unlayer%2Fangular-email-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlayer%2Fangular-email-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlayer%2Fangular-email-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlayer%2Fangular-email-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unlayer","download_url":"https://codeload.github.com/unlayer/angular-email-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478190,"owners_count":22077676,"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","angular-components","builder","drag-and-drop","email-marketing","email-template","html-emails","template"],"created_at":"2024-11-15T04:24:56.543Z","updated_at":"2025-05-16T06:06:31.175Z","avatar_url":"https://github.com/unlayer.png","language":"TypeScript","readme":"# Angular Email Editor\n\nThe excellent drag-n-drop email editor by [Unlayer](https://unlayer.com/embed) as a [Angular](https://angular.io/) _wrapper component_. This is the most powerful and developer friendly visual email builder for your app.\n\n|                                                           Video Overview                                                            |\n| :---------------------------------------------------------------------------------------------------------------------------------: |\n| [![Angular Email Editor](https://unroll-assets.s3.amazonaws.com/unlayervideotour.png)](https://www.youtube.com/watch?v=MIWhX-NF3j8) |\n|                                        _Watch video overview: https://youtu.be/MIWhX-NF3j8_                                         |\n\n## Live Demo\n\nCheck out the live demo here: https://angular-email-editor-demo.netlify.app/ ([Source Code](https://github.com/unlayer/angular-email-editor/tree/master/src))\n\n## Installation\n\nThe easiest way to use Angular Email Editor is to install it from Npm or Yarn and include it in your own Angular build process.\n\n```\nnpm install angular-email-editor --save\n```\n\n## Usage\n\nNext, you'll need to import the Email Editor module in your app's module.\n\n**app.module.ts**\n\n\u003e If you don't have an **app.module.ts** file, you can ignore this step and add `imports: [ EmailEditorModule ]` to your **app.component.ts** instead.\n\n```ts\n\nimport { EmailEditorModule } from 'angular-email-editor';\n...\n\n@NgModule({\n  ...\n  imports: [ EmailEditorModule ],\n  ...\n});\n```\n\n**app.component.ts**\n\n```ts\nimport { Component, ViewChild } from '@angular/core';\nimport { EmailEditorComponent, EmailEditorModule } from 'angular-email-editor';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css'],\n  imports: [EmailEditorModule],\n})\nexport class AppComponent {\n  title = 'angular-email-editor';\n  options: EmailEditorComponent['options'] = {\n    version: 'latest',\n    appearance: {\n      theme: 'modern_dark',\n    },\n  };\n\n  @ViewChild(EmailEditorComponent)\n  private emailEditor!: EmailEditorComponent;\n\n  private get unlayer() {\n    return this.emailEditor.editor;\n  }\n\n  // called when the editor is created\n  editorLoaded() {\n    console.log('editorLoaded');\n    // load the design json here\n    // you can get the design json by calling unlayer.exportHtml (see below)\n    // this.unlayer.loadDesign({ /* json object here */ });\n  }\n\n  // called when the editor has finished loading\n  editorReady() {\n    console.log('editorReady');\n  }\n\n  exportHtml() {\n    this.unlayer.exportHtml((result) =\u003e {\n      // result object format: { html: string, design: object, amp: object, chunks: object }\n      console.log('exportHtml', result);\n    });\n  }\n}\n```\n\n**app.component.html**\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cbutton (click)=\"exportHtml()\"\u003eExport\u003c/button\u003e\n  \u003cemail-editor\n    [options]=\"options\"\n    (loaded)=\"editorLoaded()\"\n    (ready)=\"editorReady()\"\n  \u003e\u003c/email-editor\u003e\n\u003c/div\u003e\n```\n\n**Skip Lib Check**\n\nSet `skipLibCheck: true` in `tsconfig.json`.\n\n**tsconfig.json**\n\n```ts\n{\n  \"compilerOptions\": {\n    \"skipLibCheck\": true,\n  }\n}\n```\n\nSee the [example source](https://github.com/unlayer/angular-email-editor/tree/master/src) for a reference implementation.\n\n### Methods\n\nAll unlayer methods are available in `this.unlayer`. Here are the most used ones:\n\n| method         | params              | description                                             |\n| -------------- | ------------------- | ------------------------------------------------------- |\n| **loadDesign** | `Object data`       | Takes the design JSON and loads it in the editor        |\n| **saveDesign** | `Function callback` | Returns the design JSON in a callback function          |\n| **exportHtml** | `Function callback` | Returns the design HTML and JSON in a callback function |\n\nSee the [Unlayer Docs](https://docs.unlayer.com/) for all available methods, or log the object in the console to explore it.\n\n\n### Properties\n\n- `editorId` `String` HTML div id of the container where the editor will be embedded (optional)\n- `minHeight` `String` minimum height to initialize the editor with (default 500px)\n- `options` `Object` options passed to the Unlayer editor instance (default {})\n- `tools` `Object` configuration for the built-in and custom tools (default {})\n- `appearance` `Object` configuration for appearance and theme (default {})\n- `projectId` `Integer` Unlayer project ID (optional)\n- `loaded` `Function` called when the editor instance is created\n- `ready` `Function` called when the editor has finished loading\n\nSee the [Unlayer Docs](https://docs.unlayer.com/) for all available options.\n\n## Custom Tools\n\nCustom tools can help you add your own content blocks to the editor. Every application is different and needs different tools to reach it's full potential. [Learn More](https://docs.unlayer.com/docs/custom-tools)\n\n[![Custom Tools](https://unroll-assets.s3.amazonaws.com/custom_tools.png)](https://docs.unlayer.com/docs/custom-tools)\n\n## Localization\n\nYou can submit new language translations by creating a PR on this GitHub repo: https://github.com/unlayer/translations. Translations managed by [PhraseApp](https://phraseapp.com)\n\n### License\n\nCopyright (c) 2024 Unlayer. [MIT](LICENSE) Licensed.\n","funding_links":[],"categories":["Framework Interoperability"],"sub_categories":["Wrappers"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funlayer%2Fangular-email-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funlayer%2Fangular-email-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funlayer%2Fangular-email-editor/lists"}