Detalle de cada producto

scss

.page-product {
  padding: 0 3em;
  .detail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    .gallery {
      overflow: hidden;
      width: 100%;
    }
    h2, h1 {
      margin-bottom: 5px;
      font-weight: bold;
      font-size: 2em;
    }
    h2 {
      font-size: 1.5em;
    }
  }
}

HTML

<div class="page-product">
  <button (click)="goToBack()">Back</button>
  <div class="detail" *ngIf="product">
    <div class="gallery">
      <swiper [slidesPerView]="1">
        <ng-template swiperSlide *ngFor="let img of product?.images">
          <img [src]="img" alt="img" />
        </ng-template>
      </swiper>
    </div>
    <div>
      <h1>{{ product?.title }}</h1>
      <h2>{{ product?.price | currency }}</h2>
      <p>{{ product?.description }}</p>
    </div>
  </div>
</div>

Sugiero utilizar la dependencia router en vez de location. Utilizando el método back de la dependencia location te devuelve a la página anterior que se encuentre en el historial de tu navegador, es decir si alguien te envía el link o ingresas directamente a el, te devolverá a la página donde estabas anteriormente o sea es posible que te saque de la app si no estabas navegando en ella. Utilizando la dependencia router puedes utilizar dos métodos y pasarle específicamente la URL a la que deseas que navegue cuando se ejecute la acción, estos dos métodos son navigate() y navigateByUrl().

es impresionante como piensan en todo los que desarrollaron angular

Para regresar hice uso de Router

private router: Router

goToBack(id:any) {
    // this.location.back();
    this.router.navigate(['/category', id]);
}

<button (click)="goToBack(product?.category?.id)">Back</button>

les recomiendo nistalar el plugin de vscode path intellisense, sirve para el autocompletado de rutas

Les paso los estilos que hice. Están un poco más estéticos, en espacial el botón de Back, y ya tienen el responsive:

.product-page {
  width: 90%;
  margin: 0 auto;
  > .back-btn {
    background-color: var(--white);
    border: 0;
    cursor: pointer;
    color: var(--hospital-green);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    margin-bottom: 1.6rem;
    font-size: 2rem;
    > svg {
      width: 2.5rem;
    }
  }
}

.detail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  > .gallery {
    overflow: hidden;
    border-radius: var(--sm);
    margin-bottom: var(--sm);
    img {
      object-fit: cover;
      width: 100%;
      height: auto;
    }
  }
  > .product-info {
    .title {
      font-size: 2.4rem;
      font-weight: 700;
      margin-bottom: var(--md);
    }
    .price {
      font-size: var(--lg);
      font-weight: 700;
      margin-bottom: var(--md);
    }
    .description {
      font-size: var(--md);
      margin-bottom: var(--md);
    }
  }
}

// MOBILE
@media screen and (max-width: 768px) {
  .detail {
    display: flex;
    flex-direction: column;
    align-content: center;
  }
}

Y el HTML

<div class="product-page">
  <button (click)="goBack()" class="back-btn">
    <svg xmlns="https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
    </svg>
    Back
  </button>

  <div class="detail" *ngIf="product">
    <div class="gallery">
      <swiper [slidesPerView]="1" [autoHeight]="true">
        <ng-template swiperSlide *ngFor="let image of product?.images">
          <img [src]="image" [alt]="product.title">
        </ng-template>
      </swiper>
    </div>

    <div class="product-info">
      <h1 class="title">{{ product?.title }}</h1>
      <p class="price">{{ product?.price | currency }}</p>
      <p class="description">{{ product?.description }}</p>
    </div>
  </div>
</div>

Les recomiendo poner el path para cada producto abajo del path de “categories”, los tenía separados y me daba error.

SwiperSlide not work
Lastimosamente, los desarrolladores del módulo Swiper eliminaron en su última versión (https://swiperjs.com/changelog#9-0-0-2023-02-01) todos los componentes de Angular. Sin embargo, en la versión 8 (usada en este curso) aún posee los componentes, pero por alguna razón no están funcionando correctamente.
La solución que proponen los desarrolladores de Swiper es hacerlo a través de la documentación que brindan para el framework Element (https://swiperjs.com/element) que al parecer de esa manera es posible reemplazar el Slide para las imágenes.
En mi caso no logre que este funcionara de dicha manera. Por tanto, opte por buscar otra opción que permitiera implementar el Slide, como resultado encontré un módulo llamado angular-image-slider, la cual funciona bien y es fácil de utilizar. Este es el enlace de la librería en npmjs: https://www.npmjs.com/package/angular-image-slider.
Espero que les fusioné para solucionar el problema y puedan seguir aprendiendo.

Actualmente el SwiperSlide no está funcionando correctamente con el Angular, sugiero trabajarlo con Boostratap 5.0

Pagina HTML

<div class="page-product">
  <button (click)="onToBack()">Back</button>
  <div class="detail" *ngIf="product"></div>
    <div class="gallery">
      <div *ngIf="product" class="product-detail">
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-indicators">
            <button type="button" *ngFor="let img of product.images; index as i" class="carousel-item" [class.active]="i === indexImgActivate"
            data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          </div>
          <div class="carousel-inner">
            <div *ngFor="let img of product.images; index as i" class="carousel-item" [class.active]="i === indexImgActivate" >
              <img [src]="img" class="d-block w-100" alt="...">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev" (click)="onPrevImage()">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next" (click)="onNextImage()">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
    </div>
    <div>
      <h1>{{ product.title }}</h1>
      <h2>{{ product.price | currency }}</h2>
      <h2>{{ product.description }}</h2>
    </div>
</div>

Adicional tendran que adicionar dos eventos en el ts.

  indexImgActivate = 0;

  onPrevImage() {
    if (this.indexImgActivate > 0) {
      this.indexImgActivate -= 1;
    } else {
      this.indexImgActivate = this.product.images.length-1;
    }
  }

  onNextImage() {
    if (this.indexImgActivate<this.product.images.length-1) {
      this.indexImgActivate += 1;
    } else {
      this.indexImgActivate = 0;
    }
  }

Mi diseño para el product-detail.

CSS

.page-product {
	 padding: 0 3em;
}
 .page-product .detail {
	 display: grid;
	 grid-template-columns: repeat(2, 1fr);
	 grid-gap: 20px;
}
 .page-product .detail .gallery {
	 overflow: hidden;
	 width: 100%;
}
 .page-product .detail h2, .page-product .detail h1 {
	 margin-bottom: 5px;
	 font-weight: bold;
	 font-size: 2em;
}
 .page-product .detail h2 {
	 font-size: 1.5em;
}

Al parecer la nueva versión de swiper no tiene doc para angular, dejo enlace a la versión anterior para que puedan usarlo: https://v8.swiperjs.com/angular

ActivatedRoute
paramMap: Observable que contiene un mapa de los parámetros obligatorios y opcionales específicos de la ruta. El mapa admite la recuperación de valores únicos y múltiples del mismo parámetro.

no funca el swiper

ng g c pages/product-detail