Creating custom email templates with ease. It provides a user-friendly interface that allows you to drag and drop various elements into your email template, including text, images, and buttons.
The AIPEmailBody component is responsible for creating the structure of the email. It includes two subcomponents:
Provides a variety of editing functionalities for customizing the design of the email. It includes several subcomponents:
To get started, you'll need to navigate to
src/libin your project, where you'll find the following folders:
For our example throughout the folder structure, we used
We'll explore each folder individually in detail.
In the blocks folder you'll find the following components:
button-block: Creates a button block in an email.
divider-block: Is creating dividers in an email.
html-block: Provides custom HTML code to an email.
image-block: Creates an image block in an email.
navigation-block: Creates navigation links in an email.
social-block: Displays a list of social network icons and labels.
spacer-block: Allows adding empty space in the email layout.
text-block: Customizable block used for displaying text content.
Each block contains an
htmlfile are defined the component's template.
The component's styles are defined in the
A component's definition is specified in its associated
tsfile, while the testing of the component is carried out in the
In the blocks folder you'll find the following subfolders:
- form: This folder in the project contains several Angular directives that define and modify form elements such as input fields, buttons, labels, and panels. These directives add class lists, set attributes, and modify styles to achieve a consistent look and feel for the form elements.
- tooltip: In this folder, the directive is responsible for creating a tooltip with the given content when hovering over the element it is applied to. The tooltip component is a simple component that displays the tooltip's content. Listening to mouseenter and mouseout events on the host element, this directive creates or removes the tooltip component as needed.
Contained within the email-aside folder are several files, including HTML and TypeScript files for a component.
This component features a stepper, block and structure lists, and settings portal.
In the component's HTML file, a horizontal stepper is defined with three labeled steps.
By subscribing to the
currentSettingsPortal$observable, the component updates the stepper's selected index.
Testing for the email-aside component is done via the TestBed API within its respective
Included in the email-body folder is an HTML and a TypeScript file.
The component inside the folder showcases an email body and consists of a drop list for structures, a template list, and settings for the template.
In the HTML file, ngSwitch is used to alternate between the structure display and the template list display.
The IP-email-body folder consists of an HTML file and a TypeScript file used to display an email body component.
It includes a drop list for structures, a template list, and settings for the template.
Using ngSwitch, the HTML file toggles between displaying the structures and the template list.
To test the email-body component, its spec.ts file uses the TestBed API.
The component's layout is implemented using CSS classes, including a grid system for positioning the different elements.
Additionally, the component includes a preview feature, which can display the email in different device sizes, such as desktop, tablet, or mobile.
In the settings folder you'll find the following components:
align: Defines a template with two select elements, one for horizontal alignment and one for vertical alignment.
background: Allows users to customize the background of an email. It includes options for setting a background color or image with repeat and size settings.
border: Contains files for customizing the border of an element. It includes a color picker, options for adjusting border width and radius and selecting the border style.
color: Allows customizing the appearance of borders. The component template includes options for specifying border color, width, style, and radius.
font: Contains files related to customizing the font style of text. The files include a component for customizing the font size, weight, and style, as well as options for choosing standard or custom Google fonts.
image-upload: Contains an Angular component that allows the user to input a URL for an image and displays a preview of the image if available.
line-height: Consists of a form input for specifying the line height value and a dropdown menu for selecting the unit of measurement.
link: Contains files for a component that allows users to add links to their email templates. The component includes an input field for the link URL and a dropdown menu to select the link target, such as opening the link in a new window.
margin: Contains a component that allows users to set margin values for an HTML element. The component template consists of an input field for each of the four margin values: top, right, bottom, and left. The user can enter a numerical value in pixels, which is then stored in the component's
padding: Allows users to adjust the padding of an HTML element. It consists of a grid layout with four input fields, one for each side (top, right, bottom, left), and an associated label for each field.
width-height: Contains a component that allows users to set the width and height of an element. The component includes an input field for numerical values and a dropdown for selecting units of measurement, as well as a button for setting the dimensions to
You will find the following files inside the folder:
This is an Angular template file for the
It contains an
ng-containerthat switches between different parts of the email body editor based on the value of the
The default part displays a list of email body structures that can be dragged and dropped, and the templates part displays a list of available templates.
email-body.component.scssfile contains SCSS code that defines the styling for the email body component in an email builder application.
By setting the
displayproperty to block on the host element, which is the component itself, the component can take up the entire available width of its parent container.
This file contains the unit test for the
The test checks if the component is created successfully using the Angular TestBed and the component fixture.
controlproperty as an instance of
FormControl. This can be used to manage the value of the email body content.
In addition, the component sets the
changeDetectionstrategy to OnPush, which improves performance by detecting changes only when needed.
The template for this component is defined in
email-body.component.html, and the component's styles are defined in
In the structure folder you'll find the following components:
It contains the structure of an email builder component that allows users to drag and drop blocks and customize the layout and styles of the email.
Nested elements such as ng-containers, divs, buttons, and labels with their respective attributes and directives are included in the template.
Custom directives and components are utilized by the template to render dynamic content and apply styles to the email.
The component includes various buttons to perform actions such as duplicating, deleting, and saving the email module. It also provides controls to adjust the background, border, padding, margin, and layout of the email, as well as individual styles for each column in the layout.
It includes styling rules for various elements such as the host, empty column, tool button, overflow, and drag-and-drop elements.
Utility classes are used to apply styles like background color, border, opacity, and transitions in this.
This is a test file for the
It imports necessary modules for testing and declares the component to be tested.
beforeEachblock, it creates a fixture for the component and detects changes.
itblock tests if the component is successfully created.
It defines the structure of an email and includes a template and a stylesheet.
The component has a selector of
tail-structure, uses the
OnPushchange detection strategy, and is used to render dynamic content and apply styles to the email.
In the template-list folder you'll find the following components:
It consists of two main sections:
- The first section is a horizontally-aligned row of buttons, each representing a category of email templates. When a button is clicked, the corresponding category is selected and its associated templates are displayed in the second section.
- The second section is a grid of template cards, each displaying a thumbnail image of the template and a "Use in editor" button. Clicking the button allows the user to select the template and use it in the email editor.
If there are no templates available in the selected category, a message is displayed instead.
Additionally, while the templates are being loaded, a loading message is displayed.
It contains the styling for the
:hostselector is used to target the host element and set it to
It defines a
describeblock that contains a series of tests for the
beforeEachblock uses the
TestBed.configureTestingModulemethod to create a testing module and compile the
To determine if the component was created successfully, the test in the
itblock checks for its existence, and the test passes if the component is found.
This is the TypeScript file for the Template List component.
The component uses the OnPush change detection strategy to optimize performance.
Contains a single test that checks if the
This is done by importing the module and setting it up in a testing module using
TestBed.configureTestingModule, then calling
expectto verify that
It is built on top of the Ngx Email Builder module and uses the Tailwind CSS framework for styling.
The module provides a set of customizable building blocks for creating email templates, including text blocks, button blocks, image blocks, and more.
It also includes settings components for customizing email styles such as background, color, and font.
Additionally, the module provides a template list component for browsing and selecting pre-built email templates.
It is the entry file of the
TailwindEmailBuilderModule. It is an Angular module that provides a set of reusable components and directives for building HTML email templates with TailwindCSS classes.
This module imports and uses components and directives from the
IpFormUIModule, as well as several Angular CDK modules. It also declares its own components and directives, such as
TooltipComponent, among others.
Additionally, this module provides a set of default blocks, such as
ImageBlockComponent, and more, that can be used to quickly assemble an email template.
TailEmailBuilderComponentand provides a static method
forRoot()that accepts an optional
IIPEmailBuilderConfigobject and returns a
TailwindEmailBuilderModule. This allows the module to be easily imported and configured in an Angular application.
test-setup.tsis a setup file for Jest testing framework that is used in combination with
jest-preset-angularto provide pre-configured setup for Angular applications. This file imports
jest-preset-angularwhich initializes the Jest environment to work with Angular testing.
setup-jestfile does a number of things such as configuring TestBed, providing mocks for common Angular dependencies, and configuring common testing utilities such as Jasmine Matchers.
test-setup.ts, this setup file is automatically run before all Jest tests in the project, ensuring that the necessary setup is done before each test is executed.
This helps to reduce boilerplate code and ensure a consistent testing environment across the project.