PrimeNG Dropdown With Service

app.component.html

<p-dropdown
  [options]="employees$ | async"
  placeholder="Choose an employee"
  [showClear]="true"
  [filter]="true"
></p-dropdown>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { SelectItem } from 'primeng/api';
import { Observable } from 'rxjs';
import { EmployeeService } from './app.service';

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

  constructor(private readonly employeeService: EmployeeService) {}

  employees$: Observable<Array<SelectItem<number>>>;

  ngOnInit() {
    this.employees$ = this.employeeService.getEmployeesAsSelectList$();
  }
}

app.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { SelectItem } from 'primeng/api';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { EmployeeModel } from './employee.model';

@Injectable({ providedIn: 'root' })
export class EmployeeService {
  
  constructor(private readonly httpClient: HttpClient) {}

  getEmployeesAsSelectList$(): Observable<Array<SelectItem<number>>>{
    return this.httpClient.get<Array<EmployeeModel>>('https://my.api.mockaroo.com/employees.json?key=35003520')
    .pipe(
      map((rawData) => {
        return rawData.map((employe) => ({
          value: employe.id,
          label: `${employe.firstName} ${employe.lastName}`,
        }));
      })
    );
  }
}

Employee.model.ts

export interface EmployeeModel{
    id: number;
    firstName: string;
    lastName: string;
}