Angular Spring Boot showing data in table

Here we will use Angular and Spring boot to show data in HTML table.

Spring boot

To start a spring project go to

For this project we selected

  1. Java 1.8
  2. Spring Web
  3. Spring Data JPA
  4. MySQL Driver
Spring Initializer to start spring boot project
Fig: Spring Initializer to start spring boot project

Click on generate to download spring boot project then extract then project zip file and move to your project location.

Eclipse IDE is used to develop spring boot project.

How to import maven project in Eclipse

  1. Open Eclipse
  2. Click on File
  3. Click on import
  4. On select import wizard select Maven
  5. Click on existing maven Project
  6. Click on next
  7. Browse folder
  8. Click on finish

Now maven project is imported to eclipse.

Updation of project is required for that follw this steps

  1. Right click on project in project Explorer
  2. Select Maven Option
  3. Update Maven
Spring Boot Project Explorer
Spring Boot Project Explorer


Here we configured spring datasource to connect with MySql Database.

EmployeeController is used to fetch employee list from EmployeeService and send it to client using RestController.

@CrossOrigin(origins = “http://localhost:4200”) annotation is used to allow access this url to angular project.

This is an Employee entity class which maps with database table employee.

EmployeeServices fetch data from EmployeeDAO and pass to EmployeeController

Interface EmployeeDAO extends to CrudRepository which provice access to database table.

To test our spring boot project you can call url using browser or Postman API

Postman API
Fig: Postman API

Angular Project

Visual studio code IDE is used to develop this project.

npm -v is 8.5.5
ng –version
Package and Version
@angular-devkit/architect 0.1303.7 (cli-only)
@angular-devkit/core 13.3.7 (cli-only)
@angular-devkit/schematics 13.3.7 (cli-only)
@schematics/angular 13.3.7 (cli-only)

Angular Commands

  1. To create new project => ng new angularapp1
  2. Generate service => ng g s employee
  3. Start server => ng serve
Angular Project Explorer
Fig: Angular Project Explorer


Remove all existing body content.

add Bootstrap CDN in head section


Here HttpClientModule is added in imports.


This file contains employee interface that is having all fields of employee.


This file contains a method getEmployees() to get the employee data from specified url.


This fill access the EmployeeService class and get data of Employee to employess variable


This is HTML file to show employee data

ngFor is used to loop employees and interpolation is used to show data or employee

Afterexecuting you will get following output.

Angular Spring boot Showing data in table
Fig: showing Employee data using spring boot and angular

Hope you understand how to use Angular and Spring boot to show data in HTML table..

Read More

Angularjs select : ng-repeat ng option default multiple select selected value