Carga de archivos en Angular: ¿cómo enviar correctamente un archivo al servidor con barra de progreso?

¡Hola a todos! Soy nuevo en Angular (versión 15) y TypeScript, y no puedo entender cómo cargar archivos. Necesito hacer un formulario donde el usuario seleccione un archivo (imagen o PDF) y luego lo envíe al servidor mostrando el progreso de la carga. Intenté usar FormData normal, pero algo sale mal. Aquí está mi código actual del componente:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-upload',
  template: `
    <input type="file" (change)="onFileSelected($event)">
    <button (click)="onUpload()">Cargar</button>
  `
})
export class UploadComponent {
  selectedFile: File | null = null;

  constructor(private http: HttpClient) {}

  onFileSelected(event: any) {
    this.selectedFile = event.target.files[0];
  }

  onUpload() {
    const formData = new FormData();
    formData.append('file', this.selectedFile!);
    this.http.post('/api/upload