The NgZorro is an enterprise-class Angular UI component library that we can use in our applications under the MIT license. This article will show you how to use NgZorro Mention Component with Spring Boot and PostgreSQL database.
2. Overview of an example application
The example application will use Angular as a frontend framework, Spring Boot to handle REST requests, and PostgreSQL database to persist any submitted data. Mention Component is often used when we need to mention someone or something in the comment or message. In this article, we will present how to easily integrate it into our application.
3. Spring boot application
Let's start with the back-end site of the application. We will use Spring Boot as our main server that will provide an API for communication with the front-end site. We will use REST communication based on JSON.
3.1. Maven dependencies
First, we need to create a Maven project, with the following pom.xml file:
We used several dependecies:
spring-boot-starter-web- Spring Boot web container - used to create the REST API,
spring-boot-starter-data-jpa - Spring Data for JPA - used in persistence layer,
postgresql - PostgreSQL driver - used for connection with the database.
3.2. Backend project structure
Let's take a look at the backend project file structure:
In that structure we could find the following classes:
Application - this is the main Spring Boot class that starts the web container,
UserController - REST controller class that will handle all HTTP requests,
UserEntity - entity class that represents object in the database,
UserRepository - for communication with database,
UserService - aggregates all business logic,
CorsFilter - to give a permission for angular application to call REST API on the different port,
application.properties - Spring Boot configuration file,
insert.sql - SQL inserts with sample users.
The UserEntity class is a java representation of tbl_user table in the PostgreSQL database:
The structure of the UserEntity class is simple. It contains three fields:
id - the PRIMARY KEY,
username - String with username,
top - a flag tells if a user is at the top.
3.4. Persistance layer
The UserRepository extends Spring Data JpaRepository and contains some additional query methods:
3.5. REST API
Spring Boot application will provide the following REST API:
Get list of all users
List of only TOP users
Updating list of TOP users
All endpoints will be defined in UserController class marked as Spring @RestController:
Basic business logic is located in the UserService class. This service allows us to aggregate methods with complex logic away from the Controller class.
3.7. Spring Boot configuration file
In the Spring Boot configuration file we have properties responsible for the data source and JPA:
3.8. Insert test data
After we run the Spring Boot application for the first time, we will need to insert some example data:
Run insert.sql script:
4. Angular application
The easiest way to create an Angular application is to use the Angular CLI, which is a command-line tool that you use to initialize, develop, update, and maintain Angular applications directly from a terminal.
In case you don't have Angular CLI on your machine, use the following to install it globally:
Next, let's create our example application called mention:
System should print the following output:
The next step will be to add ng-zorro-antd dependency to our Angular project:
The output of above command will me as follows:
Now, we could run the Angular application to see if everything works as expected:
Go to the browser and enter: http://localhost:4200 into the address bar. You should see the following screen:
Of course, this is not our target application, we need to build it.
4.1. Angular project structure
The structure is simple:
app.component.html - this is our main component,
app.component.scss - styles used in main app component,
app.component.ts - main app component TypeScript class,
app.module.ts - base application module,
user-http.service.ts - service with Http client used for communication with REST API.
4.2. HTTP client
The UserHttpService using the HTTPClient library for communication with backend:
4.3. Base application component
The AppComponent will be our main component responsible for interactions with the end-user.
4.4. Base component HTML file
The main component allows us to select mention users, using NgZorro Mention component, and submits selected values. Submitted usernames will be marked as TOP in the database.
4.5. Application Module
In main Angular module we need to import several modules:
NzMentionModule - module for NgZorro Mention component,
NzFormModule - the NgZorro form module,
NzButtonModule - the NgZorro buttons module,
NzInputModule - NgZorro input module.
4.6. Environment file
In environment file we added baseUrl that points to Spring Boot application server:
In this article, we presented how to create Spring Boot application with PostgreSQL database and Angular on the frontend site. We show how to use NgZorro Mention component.
As usual this example could be found on our GitHub repository: GitHub