Components and Services Setup
export class ProductComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private router: Router,
) { }
ngOnInit() {
this.route.data
.subscribe(
(data: Data) => {
this.router = data['product'];
}
);
}
}
I'm currently working on the HTML structure for the product component and could use some guidance.
<div class="productContainer">
<img class="productContainer__image" src="img">
<div class="innerContainer">
<p class="innerContainer__text">text</p>
<label class="innerContainer__text">Size:</label>
<app-select [options]="['XS', 'S', 'M', 'L', 'XL']" placeholder="Size" width="100px"></app-select>
<label class="innerContainer__price">Price: 40$</label>
<div class="buttonContainer">
<button class="buttonContainer__button">Add to bag</button>
</div>
</div>
</div>
HTTP ProductService
public getProduct(id: string): Observable<IGetProductResponse> {
const baseUrl = ENDPOINT;
return this.http.get<IGetProductResponse>(baseUrl + id);
}
Product Service and Resolver
public getProduct(id: string): Observable<IProductInterface> {
return this.httpProductService.getProduct(id)
.pipe(catchError((errorResponse: HttpErrorResponse) => {
let errorMessage: string;
switch (errorResponse.status) {
case 400:
errorMessage = 'error 400';
break;
default:
errorMessage = 'other error';
}
return throwError(errorMessage);
}),
map((response: IGetProductResponse) => response.data!),
);
}
Product Resolver
@Injectable()
export class ProductResolver implements Resolve<IProductInterface> {
constructor(private productService: ProductService) { }
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IProductInterface> {
return this.productService.getProduct(route.paramMap.get('id')!);
}
}
If you need more details or have any questions, feel free to ask. Thanks for the assistance!