Connect Angular with Spring Boot

Posted By : Ritik Jain | 30-Aug-2019

Connect angular2+ with spring boot and  request or response exchange process

For this, you must have little knowledge of spring-boot API making. But I will cover all concept of angular2+ and also tell you about how to send a request through @RequestParams and @RequestBody from angular2+.

Setup Angular2+

You're going to need a couple of things before proceeding:

  • Node.js
  • Node Package Manager (NPM)

To check whether or not you have both of these installed, visiting your command line or console and type:

$ node -v
$ npm -v

If nodejs is not installed then go to and download/install it.

We are going to install angular5 with the help of npm.

$ npm install @angular/cli -g
$ ng -v
$ ng new my-new-project --style=scss --routing
$ cd my-new-project
$ ng serve

Now angular5 is ready to work. Let start with integration part.

Go in app.component.ts


import {AppService} from './app.service';
export class AppComponent {
constructor(private appService:AppService) {
arrayOfTags: Array<String> = [];
this.arrayOfTags =;
},(errorRes) => {

Now go in app.service.ts

import { Injectable } from '@angular/core';
export class AppService {
constructor(private httpHttpClient) {
getAllTags(): Observable<any> {
return this.http.get<any>('http://localhost:8080/tags');
"http://localhost:8080" port where our spring boot application running and /tags is the API created in sprint-boot.
Spring boot /tags API code is given below-:
	public ResponseEntity<Object> getTags(){
		Map<String ,Object> response = blogService.getTags(accessToken);
		return ResponseHandler.generateResponse(HttpStatus.OK, true, "Tag list", response);
Send a request using RequestParams.
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
export class BlogService {
constructor(private http: HttpClient) {
getEditBlogDetails(id): Observable<any> {
let params =new HttpParams();
return this.http.get<any>('http://localhost:8080/getBlogDetails',{params:params});
Send a request using RequestBody.
Looking for an app developer for mobile app development using Angular Js platform click this link

About Author

Author Image
Ritik Jain

Ritik is an accomplished Backend Developer with extensive experience in Mean. He is proficient in Core Java, Spring-Boot, Hibernate, Node.js, Angular 2+, and various relational databases like MySQL and MongoDB. With his expertise in API implementations, webservices, development testing, and deployments, he has contributed to the successful completion of various client projects. Apart from his professional pursuits, Ritik is an enthusiastic gamer and keeps himself updated with the latest advancements in technology.

Request for Proposal

Name is required

Comment is required

Sending message..