Send Emails using Angular + Spring Boot + Thymeleaf

Photo by Krsto Jevtic on Unsplash

Thymeleaf is a modern server-side Java template engine for both web and standalone environments. The main goal of it is to bring elegant natural templates to the development workflow.. HTML templates written in Thymeleaf look and work like HTML.

Here we will be having an Angular 6 front-end from which we will be collecting data using a simple form and along with it a Spring Boot back-end to send the Email.

Lets first start with the Angular project. Use the below command to create a new project

ng new project_name

Now we need to create the html form to collect data. So let us move to the app.component.html file. 

Next we need to move to the app.component.ts file. Here we will be using the HttpClient to communicate with the Spring Boot back-end

It is important to make sure that all the imports which are mentioned at the beginning of the component.ts files are present in the project node modules folder. If not they must be installed as below.

npm install imported_file_name

Now it is time to move to the Spring Boot project. You can create a Spring Boot project easily from here.

To start with we need to add the below dependencies to our pom.xml file as we need to import them to our project to work with them.

As we will be needing to send the emails through an email account, we need to enter the credentials, host and port details to the application properties file. Here we will be using the SMTP protocol to send emails. So we need to configure that as well.

Next is creating a class to get the variables in the front-end.

Now we need to configure the SpringTemplateEngine and the SpringResourceTemplateResolver as we will be needing them once we are working with Thymeleaf templates.

Now we can write our main few methods in the controller class to get the data from the front-end and to initialize the templates while passing the variables as parameters to them.

We also need to create a html file to define how our email would appear once the receiver receives it. This will be used as the email template. 

That’s it.. We have completed the implementation and its time to test it… 

Simple… Isn’t it? Hope it was clear to you.. The project source code can be viewed and downloaded from GitHub.. You are free to use it in your projects.. 

Cheers!! Have a pleasant day!!

Leave a Reply

Your email address will not be published. Required fields are marked *