ngx-email-builder 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +101 -0
- package/fesm2022/ngx-email-builder.mjs +5116 -0
- package/fesm2022/ngx-email-builder.mjs.map +1 -0
- package/index.d.ts +429 -0
- package/package.json +46 -0
package/README.md
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
# Ngx-Email-Builder 📧
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
A premium, standalone email template builder for Angular applications. Build high-end, responsive email templates with a modern drag-and-drop interface.
|
|
6
|
+
|
|
7
|
+
## 📸 Screenshots
|
|
8
|
+
|
|
9
|
+
| Template Editor | Saved Templates |
|
|
10
|
+
| :---: | :---: |
|
|
11
|
+
|  |  |
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## ✨ Features
|
|
15
|
+
|
|
16
|
+
- **🚀 Performance**: Built with Angular for speed and responsiveness.
|
|
17
|
+
- **📱 Responsive**: All blocks are mobile-first and look perfect on all screens.
|
|
18
|
+
- **🎨 Premium UI**: Modern, clean design with customizable themes.
|
|
19
|
+
- **🧩 Block-Based**: Large library of pre-built blocks (Hero, Text, Button, Social, etc.).
|
|
20
|
+
- **⚙️ Standalone Mode**: Works perfectly without any backend API.
|
|
21
|
+
- **💾 Export Options**: Export your designs as clean HTML or JSON.
|
|
22
|
+
- **💻 Monaco Editor**: Integrated high-performance code editor for advanced customization.
|
|
23
|
+
- **📁 Image Management**: Built-in support for base64 image injection.
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## 📦 Installation
|
|
28
|
+
|
|
29
|
+
### Standard Installation (Any Angular Project)
|
|
30
|
+
|
|
31
|
+
Install the library via npm:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm install ngx-email-builder
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Basic Setup
|
|
38
|
+
|
|
39
|
+
1. **Import the Component**:
|
|
40
|
+
In your standalone component or NgModule:
|
|
41
|
+
|
|
42
|
+
```typescript
|
|
43
|
+
import { EmailTemplateBuilderComponent } from 'ngx-email-builder';
|
|
44
|
+
|
|
45
|
+
@Component({
|
|
46
|
+
standalone: true,
|
|
47
|
+
imports: [EmailTemplateBuilderComponent],
|
|
48
|
+
template: `<ngx-email-builder></ngx-email-builder>`
|
|
49
|
+
})
|
|
50
|
+
export class MyEditorComponent {}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
2. **Add Styles**:
|
|
54
|
+
Ensure you have a theme or global styles that accommodate the builder.
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
## 🛠 Development & Local Setup
|
|
59
|
+
|
|
60
|
+
To contribute or run the demo locally from source:
|
|
61
|
+
|
|
62
|
+
### 1. Build the Library
|
|
63
|
+
```bash
|
|
64
|
+
# Install dependencies
|
|
65
|
+
npm install
|
|
66
|
+
|
|
67
|
+
# Build the library
|
|
68
|
+
npm run build
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### 2. Run the Demo (Template Builder)
|
|
72
|
+
```bash
|
|
73
|
+
# Use the automated refresh command (builds, packs, and starts app)
|
|
74
|
+
npm run app:refresh
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
Navigate to `http://localhost:4200` to see the builder in action.
|
|
78
|
+
|
|
79
|
+
---
|
|
80
|
+
|
|
81
|
+
## 🤝 Contributing
|
|
82
|
+
|
|
83
|
+
We love contributions! Whether it's a bug report, a new feature, or documentation improvements.
|
|
84
|
+
|
|
85
|
+
1. Fork the Project
|
|
86
|
+
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
|
|
87
|
+
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
|
|
88
|
+
4. Push to the Branch (`git push origin feature/AmazingFeature`)
|
|
89
|
+
5. Open a Pull Request
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
## 🛡 License
|
|
94
|
+
|
|
95
|
+
Distributed under the MIT License. See `LICENSE` for more information.
|
|
96
|
+
|
|
97
|
+
## ✉️ Contact
|
|
98
|
+
|
|
99
|
+
Ashish Kumar - [@jd-ashish](https://github.com/jd-ashish)
|
|
100
|
+
|
|
101
|
+
Project Link: [https://github.com/jd-ashish/ngx-email-builder](https://github.com/jd-ashish/ngx-email-builder)
|