Home Uncategorized Angular Spring boot API Bootstrap Table load

Angular Spring boot API Bootstrap Table load

3 min read

This Angular and Spring boot tutorial will teach you how to view the records using Restful API.

First you have to run the Back-end Spring Boot Application

Study RestFul Api How to Works  for beginners here.

if you not watch my angular tutorial  please watch them then only you will clear of angular link here.

After That Create a new component in Angular

ng g c employeetable

in the employeetable.component.html  paste the following code.


<table class="table">
        <th scope="col">Employee Name</th>
        <th scope="col">Address</th>
        <th scope="col">Salary USD</th>
      <h1 *ngIf="!isResultLoaded">Loading.................</h1>
      <tr *ngFor="let EmployeeItem of EmployeeArray">
        <td>{{EmployeeItem.employeeName  | uppercase}}</td>
        <td>{{EmployeeItem.employeeAddress }}</td>
        <td>{{EmployeeItem.employeeSalary | currency:'USD'}}</td> 


import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

  selector: 'app-employeetable',
  templateUrl: './employeetable.component.html',
  styleUrls: ['./employeetable.component.scss']
export class EmployeetableComponent implements OnInit {

  EmployeeArray : any[] = [];

  isResultLoaded = false;

  constructor(private http: HttpClient) 
  ngOnInit(): void {
  this.http.get("http://localhost:8088/api/v1/employee/get-all-employees").subscribe((resultData: any)=>
        this.isResultLoaded = true;
        this.EmployeeArray = resultData;

i have attached the video link below. which will do this tutorials step by step


Load More Related Articles
Load More By admin
Load More In Uncategorized

Leave a Reply

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

Check Also

Laravel 11 CRUD Application

In this tutorial will teach Laravel 11 CRUD Application step by step. Laravel  11 CRUD App…