Why does my web content disappear after using dependency injection in Angular?

Question

I am trying to build a CRUD app (for practice) in Angular (using Webstorm from JetBrains) with fake employee data (first name, last name, salary, department). I'm able to see my HTML/CSS content no problem in the browser before injection. However, the minute I inject a service into my employee component the webpage goes blank. I've used DI of a service before in previous projects and haven't had this issue. Am I doing something wrong?

Employee component code:

import { Component, OnInit } from '@angular/core';
import {Employee} from "../../models/employee";
import {FormBuilder, FormGroup} from "@angular/forms";
import {EmployeeAPIService} from "../../services/employee-api.service";

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
  private _formValue !: FormGroup;
  private _employee: Employee = new Employee(0, "", "", 0, "");

  constructor(private formBuilder: FormBuilder, private employeeAPI: EmployeeAPIService) { }

  ngOnInit(): void {
    this._formValue = this.formBuilder.group({
      firstName: [''],
      lastName: [''],
      salary: [],
      department: ['']
    });
  }

  get formValue(): FormGroup {
    return this._formValue;
  }

  get employee(): Employee {
    return this._employee;
  }

  set formValue(value: FormGroup) {
    this._formValue = value;
  }

  set employee(value: Employee) {
    this._employee = value;
  }
}

Service:

import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {map} from "rxjs";

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

  constructor(private http: HttpClient) { }

  postEmployee(data: any) {
    return this.http.post<any>("http://localhost:3000/posts", data)
      .pipe(map((res: any) => {
        return res;
      }));
  }

  getEmployee() {
    return this.http.get<any>("http://localhost:3000/posts")
      .pipe(map((res: any) => {
        return res;
      }));
  }

  updateEmployee(data: any, id: number) {
    return this.http.put<any>("http://localhost:3000/posts" + id, data)
      .pipe(map((res: any) => {
        return res;
      }));
  }
}

Employee HTML: (Using Bootstrap)

<nav class="navbar navbar-light bg-primary">
  <div class="container-fluid">
    <h1 style="color: #FFF">Employees</h1>
    <div class="d-flex">
      <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
        Add Employee
      </button>
    </div>
  </div>
</nav>

<table class="table mt-3">
  <thead>
  <tr>
    <th scope="col">ID</th>
    <th scope="col">First Name</th>
    <th scope="col">Last Name</th>
    <th scope="col">Salary</th>
    <th scope="col">Department</th>
    <th scope="col">Action</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>123</td>
    <td>Test</td>
    <td>Name</td>
    <td>20000</td>
    <td>HR</td>
    <td>
      <button class="btn btn-info">Edit</button>
      <button class="btn btn-danger mx-3">Delete</button>
    </td>
  </tr>
  </tbody>
</table>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Employee Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="firstNameInput" class="form-label">First Name</label>
            <input type="text" formControlName="firstName" class="form-control" id="firstNameInput">
          </div>
          <div class="mb-3">
            <label for="lastNameInput" class="form-label">Last Name</label>
            <input type="text" formControlName="lastName" class="form-control" id="lastNameInput">
          </div>
          <div class="mb-3">
            <label for="salaryInput" class="form-label">Salary</label>
            <input type="number" formControlName="salary" class="form-control" id="salaryInput">
          </div>
          <div class="mb-3">
            <label for="departmentInput" class="form-label">Department</label>
            <input type="text" formControlName="department" class="form-control" id="departmentInput">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Add</button>
      </div>
    </div>
  </div>
</div>