Get value from springboot modelview object into angular JS 5

When you are dealing with client-side technologies like Angular, your server side (Java) needs to worry about is the data (usually json/xml) and how we present it in the view layer.

We will be using spring boot to expose REST APIs and angular5 to build our client that will be consuming the APIs exposed by the server.

Angular Service (ComplaintService.ts) :

import {Injectable} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class ComplaintService {

  constructor(private http:HttpClient) {}
  private url= '/aalcomplaint/api/complaint/lodge-complaint';

  public getLodgeComplaints() {
    return this.http.get<any[]>(this.url);
  }

}

Angular Component (ComplaintComponent.ts) :

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { ComplaintService } from './complaint.service';

@Component({
  selector: 'complaint-selector',
  templateUrl: './complaint.html',
  styles: []
})
export class ComplaintComponent implements OnInit {

  responseData: any[];

  constructor(private router: Router, private complaintService : ComplaintService){}

  ngOnInit() {
    this.complaintService.getLodgeComplaints()
      .subscribe( data => {
        this.responseData = data;
      });
  };

}

Complaint Component HTML Template (complaint.html) :

<div class="col-md-6">
  <h2> Lodge Complaint Details</h2>

  <table class="table table-striped">
    <thead>
    <tr>
      <th>Policy Number</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let complaint of responseData">
      <td></td>
    </tr>
    </tbody>
  </table>

</div>

Spring REST Controller:

@Slf4j
@CrossOrigin(origins = "*")
@RestController
public class ComplainsController {
  @CrossOrigin(origins = "*")
  @RequestMapping(value = "/aalcomplaint/api/complaint/lodge-complaint", method = {RequestMethod.GET, RequestMethod.POST})
  public ModelAndView lodgeComplaint(final HttpServletRequest request, ModelAndView modelAndView, final RedirectAttributes redirectAttributes) {
    modelAndView.addObject("policyNumber","12345");
    modelAndView.setViewName("redirect:/list-complains");
    return modelAndView;
  }
}

Hope this helps...!

More details here: https://www.devglan.com/spring-boot/spring-boot-angular-example