Creating a Drag-n-Drop Email Editor with Angular
Building a good, reliable drag-n-drop email editor is hard. Every time we wanted to add one in any of our projects, there weren’t many good options available that were polished and reliable enough for commercial use. After months of search, we decided to build one that can be embedded in any web app within 5 minutes. It’s available on GitHub and npm . Here’s what it looks like: It takes care of all the unsexy and boring stuff that comes with building a reliable and solid email editor / page builder. Things like outputting the correct HTML syntax, and making sure it looks and works fine in all old browsers and email clients (Hey, IE & Outlook =). The easiest way to use Angular Email Editor is to install it from npm or Yarn and include it in your own Angular build process. Next, you'll need to import the Email Editor module in the app module. app.module.ts app.component.ts app.component.html That’s it. This should render a fully functional drag-n-drop editor in your Angular app. Now that we have a fully functional email editor, we need to save the HTML it outputs. The editor exposes a method called exportHtml that converts the user design into HTML. We'll add a button that calls exportHtml. app.component.ts app.component.html While HTML is the final result of the design, you will need to save the work done in the email editor for future use. There are a number of use cases for this such as: Our email editor saves all work in JSON format. You can save the JSON and then pass it when loading the editor again and it will resume from where you left. We'll add a button that calls saveDesign . app.component.ts app.component.html Once you have the JSON saved, you can pass it to the editor using the loadDesign method. app.component.ts app.component.html Check out the live demo here: https://angular-email-editor-demo.netlify.com/ Play with the example implementation: Edit on CodeSandbox You can check out Unlayer’s full documentation for all available options.
