Por desgracia no puedes usar [`HttpClient.get()`](https://angular.io/api/common/http/HttpClient#get) para hacer el trabajo porque devuelve una promesa que emite un único valor como respuesta a la petición HTTP y se resuelve, nunca emite un nuevo valor o valores parciales.

La única alternativa es usar el [evento `progress` de un `XHR`](https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress) o bien hacer el PHP de una duración menor agregando uno a uno o en bloques los archivos para poder obtener un progreso parcial del trabajo.

# Usando `XMLHttpRequest`

Al salirnos del marco de trabajo de Angular deberemos acceder al DOM del documento directamente ya que Angular no detectará los cambios en las variables de la clase en el evento de actualización del objeto `XMLHttpRequest`.

##Ejemplo:

Script PHP `espera.php`:

    <?php
    /* Permitimos el acceso desde cualquier origen (OJO) */
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET');
    header('Allow: GET');
    /* Si es la comprobación prevuelo finalizamos la ejecución */
    ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') and die();
    
    /* Finalizamos cualquier buffer que haya en el servidor web */
    ob_end_flush();
    /* Enviamos datos del total */
    echo '15';
    for ($t = 0; $t <= 15; $t++) {
            /* Enviamos la actualización del progreso actual */
            echo ';' . $t;
            /* Forzamos el envío de datos parcial al navegador */
            flush();
            /* Simulamos trabajo durante 1 segundo */
            sleep(1);
    }

Ejemplo de `app.component.ts`:

    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      xhr: XMLHttpRequest;
    
      constructor() { }
    
      ngOnInit() {
        this.xhr = new XMLHttpRequest();
        this.xhr.addEventListener('progress', this.onProgress, false);
        this.xhr.open('GET', 'http://localhost/espera.php', true);
        this.xhr.send();
      }
    
      onProgress(evento) {
        /* Obtenemos la barra de progreso (no funciona la integración con Angular) */
        let progreso = document.getElementById('progreso') as HTMLProgressElement;
        /* Dividimos lo que entrega PHP (acumulativo) por puntos y comas */
        let valores: Array<String> = evento.srcElement.responseText.split(';');
        /* Cambiamos el valor de máximo (entero) por el primer elemento (total) */
        progreso.max = parseInt(valores[0] as string);
        if (valores.length > 1) {
          /* Si recibimos más de un valor cambiamos el valor actual (entero) */
          progreso.value = parseInt(valores[valores.length - 1] as string);
        }
      }
    
    }

Ejemplo de `app.component.html`:

    <progress id="progreso" value="0" max="0"></progress>

# Reduciendo el trabajo e informando del progreso

Podemos ir agregando de manera secuencial los archivos al archivo ZIP e ir informando del estado de progreso en cada lote procesado.

Para simular esto podemos usar el siguiente PHP:

    <?php
    /* Permitimos el acceso desde cualquier origen (OJO) */
    header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
    header("Access-Control-Allow-Methods: GET");
    /* Para recibir cookies debemos indicarlo */
    header("Access-Control-Allow-Credentials: true");
    header("Allow: GET");
    
    /* Si es la comprobación prevuelo finalizamos la ejecución */
    ($_SERVER['REQUEST_METHOD'] === "OPTIONS") and die();
    
    session_start();
    /* Informamos que lo que enviamos serán datos JSON */
    header('Content-type: application/json; charset=utf-8');
    /* Si es la primera ejecución o agregamos "?cero" a la URL */
    if (empty($_SESSION['trabajo']) || isset($_GET['cero'])) {
      $_SESSION['trabajo'] = [
        'archivos' => [
          'directorio/archivo1.pdf' => false,
          'directorio/archivo2.pdf' => false,
          'directorio/archivo3.pdf' => false,
          'directorio/archivo4.pdf' => false,
          'directorio/archivo5.pdf' => false,
          'directorio/archivo6.pdf' => false,
          'directorio/archivo7.pdf' => false,
          'directorio/archivo8.pdf' => false,
          'directorio/archivo9.pdf' => false,
        ],
      ];
      if (isset($_GET['cero'])) {
        die(json_encode([
          'total' => count($_SESSION['trabajo']['archivos']),
          'proceso' => 0,
        ]));
      }
    }
    /* Obenemos el listado de archivos que restan por agregar al ZIP */
    $restantes = array_filter(
      $_SESSION['trabajo']['archivos'],
      function($v) { return $v === false; }
    );
    /* Si hay archivos que comprimir "comprimimos" el siguiente */
    if (count($restantes) > 0) {
      /* Obtenemos el siguiente archivo y lo borramos de la lista */
      $siguiente = key($restantes);
      unset($restantes[$siguiente]);
      $_SESSION['trabajo']['archivos'][$siguiente] = true;
    }
    /* Simulamos el trabajo durante dos segundos */
    sleep(2);
    /* Si el trabajo no ha sido completado devolvemos un 202 */
    if (count($restantes) > 0) {
      header('HTTP/1.1 202 Accepted');
    }
    /* Enviamos el estado del trabajo */
    echo json_encode([
      'total' => count($_SESSION['trabajo']['archivos']),
      'proceso' => count(array_filter($_SESSION['trabajo']['archivos'])),
    ]);

Si el script de PHP se llama `espera.php` como antes, podemos empezar de cero el trabajo usando `http://localhost/espera.php?cero`.

Ahora nuestro `app.component.ts` podría ser:

    import { Component, OnInit } from '@angular/core';
    import { HttpClient,  } from '@angular/common/http';
    
    /* Modelo del JSON recibido por el PHP */
    export class Datos {
      total: number;
      proceso: number;
    }
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    
    export class AppComponent implements OnInit {
      progreso: Datos = { total: 0, proceso: 0 };
      completado: Boolean = false;
      
      constructor(private http: HttpClient) { }
    
      ngOnInit() {
        this.obtenerProgreso();
      }
    
      obtenerProgreso() {
        /* Hacemos la llamada enviando cookies de sesión */
        this.http
          .get('http://localhost/espera.php', { withCredentials: true })
          .subscribe((datos: Datos) => {
            this.progreso = datos;
            console.log(datos);
            if (datos.total > datos.proceso) {
              console.log('Reintentamos');
              this.obtenerProgreso();
            } else {
              this.completado = true;
            }
          });
      }
    }

Y nuestro `app.component.html`:

    <progress id="progreso"
      [value]="progreso.proceso"
      [max]="progreso.total"
    ></progress>
    <div *ngIf="completado">¡Completado!</div>

No hay que olvidar agregar al archivo `app.module.ts`, en `imports`, el módulo `HttpClientModule`.