Angular nested object

I'm trying to display an object attribute nested in another object. Each employee has a category. I manage to display employees attributes but not the category.name thanks for your help here is the code:

model:

export interface Category{
id : number;
name: string;
    }

import {Category} from "./Category";

export interface Employee {
  id: number;
  name: string;
  email: string;
  jobTitle: string;
  phone: string;
  imageUrl: string;
  employeeCode: string;
  active: boolean;
  category : Category;
}

service:

  public getEmployees(): Observable<Employee[]> {
    return this.http.get<Employee[]>(`${this.apiServerUrl}/employee/all`);
  }

app.ts

public getEmployees(): void {
    this.employeeService.getEmployees().subscribe(
      (response: Employee[]) => {
        this.employees = response;
        console.log(this.employees);
      },
      (error: HttpErrorResponse) => {
        alert(error.message);
      }
    );
  }}

html, error coming from {{employee?.category.name}}

<ul class="list-group list-group-flush">
          <li class="list-group-item"><i class="fa fa-envelope float-right"></i>{{employee?.email}}</li>
          <li class="list-group-item"><i class="fa fa-phone float-right"></i>Phone : {{employee?.phone}}</li>
          <li class="list-group-item"><i class="fa fa-briefcase float-right"></i>Active : {{employee?.active}}</li>
          <li class="list-group-item"><i class="fa fa-briefcase float-right"></i>Category : {{employee?.category.name}}</li>

JSON example of one object data that it received from backend:

 {"id":1,
"name":"ericparis",
"email":"[email protected]",
"jobTitle":"BA",
"phone":"06xxxxxxxx",
"imageUrl":"https://bootdey.com/img/Content/avatar/avatar1.png",
"active":true,
"category":{"id":1,"name":"cadre"}}