Configuración de rutas y refactorización de componentes en Angular

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);
}

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 😁

¿Que pasa si un usuario digita un path que no existe?
podríamos hace lo siguiente, esto redirige al home cualquier path que no exista en nuestra lista de rutas

  {
    path: '**',
    redirectTo: '/home',
    pathMatch: 'full',
  }

Detalle que parece importante resaltar en esta clase.

PathMatch se utiliza para especificar cómo se debe hacer la coincidencia de la ruta. Hay dos opciones:

full: la ruta se considera coincidente si el resto de la URL coincide con la ruta especificada.

prefix: la ruta se considera coincidente si la URL comienza con la ruta especificada.

Esta fue mi solución:

//Products.ts
  @Output() loadMore = new EventEmitter<ILoadMore>();
  limit: number = 10;
  offset: number = 0;
  @Input() btnMoreActive: boolean = true

  onLoadMore() {
    this.offset += this.limit
    this.loadMore.emit({ limit: this.limit, offset: this.offset })
  }

//Product.html
  <button *ngIf="btnMoreActive" (click)="onLoadMore()">Load More</button>

//Home.html
<app-products [btnMoreActive]="btnMoreActive" [products]="products"  (loadMore)="onLoadMore($event)" />

//home.ts
 btnMoreActive: boolean = true
  onLoadMore({ limit, offset }: ILoadMore) {
    this.productsService.getProductByPage(limit, offset)
      .subscribe(data => {
        this.products = this.products.concat(data)
        if (this.products.length === this.countProducts) {
          this.btnMoreActive = false
        }
      });
  }

Hola,
la API funciona, da respuesta, pero las direcciones de las imágenes que manda la API para cada producto, no funcionan. Parece que el portal https://placeimg.com/ ha dejado de funcionar.
Saludos.