Custom templates
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.
AIPEmailBuilderComponent is the main component for creating custom templates. It includes two subcomponents, AIPEmailBody and AIPEmailBuilderAside, which provide different editing functionalities.
AIPEmailBody
The AIPEmailBody component is responsible for creating the structure of the email. It includes two subcomponents:
AIPEmailBuilderAside
Provides a variety of editing functionalities for customizing the design of the email. It includes several subcomponents:
In addition to these editing functionalities, by creating your own custom template, you have full control with undo/redo functionality through the AIPEmailBuilderHistoryService and an API for converting email templates through the AIPEmailBuilderRestService.
The
AIPEmailBuilderComponent provides a flexible platform for building custom email templates in your Angular application. To get started, you'll need to navigate to
src/lib in your project, where you'll find the following folders:
For our example throughout the folder structure, we used
tailwind-email-builder.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
html, scss, spec.ts and ts file. In the
html file are defined the component's template.The component's styles are defined in the
scss file.A component's definition is specified in its associated
ts file, while the testing of the component is carried out in the spec.ts file.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.
The TypeScript file extends the AIPEmailBuilderAside class and imports the CdkStepper and tap operators.
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
spec.ts file.email-body
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 TypeScript file imports FormControl and extends the AIPEmailBody class. To test the email-body component, the TestBed API is utilized in its
spec.ts file.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.
Finally, the TailEmailBuilderComponent class extends the AIPEmailBuilderComponent and adds custom functionality to the email builder component.
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'svalueobject.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 toauto.
You will find the following files inside the folder:
email-body.component.htmlemail-body.component.scssemail-body.component.spec.tsemail-body.component.ts
This is an Angular template file for the
AIPEmailBody component. It contains an
ng-container that switches between different parts of the email body editor based on the value of the contentPart$ observable. 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.
The
email-body.component.scss file contains SCSS code that defines the styling for the email body component in an email builder application.By setting the
display property 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
EmailBodyComponent. The test checks if the component is created successfully using the Angular TestBed and the component fixture.
An Angular component file that extends the AIPEmailBody abstract class from
@wlocalhost/ngx-email-builder. The
EmailBodyComponent defines a control property as an instance of FormControl. This can be used to manage the value of the email body content.In addition, the component sets the
changeDetection strategy 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 email-body.component.scss.In the structure folder you'll find the following components:
structure.component.htmlstructure.component.scssstructure.component.spec.tsstructure.component.ts
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
StructureComponent. It imports necessary modules for testing and declares the component to be tested.
In the
beforeEach block, it creates a fixture for the component and detects changes. The
it block tests if the component is successfully created.The
StructureComponent extends the AIPStructure class from the @wlocalhost/ngx-email-builder library. It defines the structure of an email and includes a template and a stylesheet.
The component has a selector of
tail-structure, uses the OnPush change 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:
template-list.component.htmltemplate-list.component.scsstemplate-list.component.spec.tstemplate-list.component.ts
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
TemplateListComponent component. The
:host selector is used to target the host element and set it to display: block.It defines a
describe block that contains a series of tests for the TemplateListComponent. The
beforeEach block uses the TestBed.configureTestingModule method to create a testing module and compile the TemplateListComponent. To determine if the component was created successfully, the test in the
it block checks for its existence, and the test passes if the component is found.This is the TypeScript file for the Template List component.
It imports the necessary modules and extends the AIPTemplateList class to implement the functionality of displaying a list of email templates.
The component uses the OnPush change detection strategy to optimize performance.
Contains a single test that checks if the
TailwindEmailBuilderModule is defined. This is done by importing the module and setting it up in a testing module using
TestBed.configureTestingModule, then calling expect to verify that TailwindEmailBuilderModule is defined.The Tailwind Email Builder module is an Angular module that provides components and directives for building email templates.
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
NgxEmailBuilderModule and IpFormUIModule, as well as several Angular CDK modules. It also declares its own components and directives, such as TailEmailBuilderComponent, StructureComponent, EmailBodyComponent, TooltipDirective, and TooltipComponent, among others.Additionally, this module provides a set of default blocks, such as
TextBlockComponent, ButtonBlockComponent, ImageBlockComponent, and more, that can be used to quickly assemble an email template.Finally,
TailwindEmailBuilderModule exports TailEmailBuilderComponent and provides a static method forRoot() that accepts an optional IIPEmailBuilderConfig object and returns a ModuleWithProviders instance of TailwindEmailBuilderModule. This allows the module to be easily imported and configured in an Angular application.test-setup.ts is a setup file for Jest testing framework that is used in combination with jest-preset-angular to provide pre-configured setup for Angular applications. This file imports setup-jest from jest-preset-angular which initializes the Jest environment to work with Angular testing.The
setup-jest file does a number of things such as configuring TestBed, providing mocks for common Angular dependencies, and configuring common testing utilities such as Jasmine Matchers.By importing
setup-jest in 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.
Last modified 4mo ago