Creando el Home

hi, hice el siguiente cambio al getAll del servicio de products, porqué no estaba identificando que los valores limit y offset

getAll(limit?: number, offset?: number) {
    let params = new HttpParams();
   //Inicio de los cambios
    const temp_limit = limit as number;
    const temp_offset = offset as number;

    if(temp_limit?.toString().length > 0 && temp_offset?.toString().length > 0) {
      params = params.set('limit', temp_limit);
      params = params.set('offset', temp_offset);
    }
   //Fin de los cambios
    
    return this.http.get<Product[]>(this.apiUrl, { params, context: checkTime() })
    .pipe(
      retry(3),
      map(products => products.map(item => {
        return {
          ...item,
          taxes: .19 * item.price
        }
      }))
    );
  }

creo que lo que estaba sucediendo en la implementación anterior, es que al ser los valore “opcionales” el if lo toma siempre como undefined así los enviemos y nunca se hará el set de los params 😁

Esta es mi solución al reto, en el componente products.component.ts he agregado una variable que me va a servir como Output con una función que será el que va a emitir el evento

@Output() onLoadMore: EventEmitter<string> = new EventEmitter<string>();

loadMore() {
    this.onLoadMore.emit();
}

Ya desde products.component.html cuando se le de click al button vamos a llamar a la función loadMore()

<button (click)="loadMore()">Load more</button>

Para finalizar desde home.component.html solo tenemos que leer dicho evento y mandar a llamar la lógica para cargar más del home.component.ts

<app-products [products]="products" (onLoadMore)="loadMore()"></app-products>

loadMore(): void {
    this.productsService.getAll(this.limit, this.offset)
      .subscribe(data => {
        this.products = this.products.concat(data.filter(product => product.images.length > 0));
        this.offset += this.limit;
      });
  }

Para finalizar en el servicio de products, no se hace una correcta asignación de los params, entonces si quieren que les funcione correctamente solo deben de cambiar en la función getAll lo siguiente:

let params = new HttpParams();
if (limit != undefined && offset != undefined) {
   params = params.set('limit', limit);
   params = params.set('offset', offset);
}