angular cannot get data from backend to frontend

Question

I'm trying to get data to the angular frontend. Tried to get data from another api, but still doesnt worked for me. So the API is working but the data cant displayed on the frontend. I read the docs but it doesn't helped to fix the problem. Hope anyone can help me.

Employee Class:

export class Employee {
id!: number;
firstName!: string;
lastName!: string;
emailId!: string;
}

Employee-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Employee } from '../employee';
import { EmployeeService } from '../employee.service';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {

  employees!: Employee[];

  constructor(private employeeService: EmployeeService) { }

  ngOnInit(): void {
    this.getEmployees();
  }

  private getEmployees(){
    this.employeeService.getEmployeesList().subscribe(data =>{
      this.employees = data;
    });
  }

}

Employee-list.component.html

<h2> Mitarbeiter Liste</h2>
<table class = "table table-striped">
    <thead>
        <tr>
            <th> Vorname</th>
            <th> Nachname</th>
            <th> Email</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let employee of employees">
            <td>{{ employee.firstName }}</td>
            <td>{{ employee.lastName }}</td>
            <td>{{ employee.emailId }}</td>
        </tr>
    </tbody>
</table>

Employee.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Employee } from './employee';
import { HttpClient } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  private baseUrl = 'http://localhost:8080/api/v1/employees';

  constructor(private httpClient: HttpClient) { }

  getEmployeesList(): Observable<Employee[]>{
    return this.httpClient.get<Employee[]>(this.baseUrl);
  }
}

App.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeeListComponent } from './employee-list/employee-list.component';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeListComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The API data:

[{"id":1,"firstName":"Frank","lastName":"wettew","emailId":"[email protected]"},{"id":2,"firstName":"Herbert","lastName":"Hubert","emailId":"[email protected]"}] ^

Frontend:

Answer 1

i now solved the problem. Thank your for that advice! I need to add to my controller @CrossOrigin(origins = "localhost:4200")

Answer 2

I replicated your Angular frontend and it works fine.

So my assumption is there is error with fetching data from backend.

Check in browser in network tab if "employees" request was successful.