PrimeNG Dropdown Usage

app.component.html

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

app.component.ts

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

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

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

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

Employee.model.ts

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