File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-product-attributes |
| templateUrl |
./product-attributes.component.html |
|
product$
|
Type : Observable<Product>
|
Default value : this.currentProductService.getProduct(
ProductScope.ATTRIBUTES
)
|
|
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Product, ProductScope } from '@spartacus/core';
import { Observable } from 'rxjs';
import { CurrentProductService } from '../../current-product.service';
@Component({
selector: 'cx-product-attributes',
templateUrl: './product-attributes.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProductAttributesComponent {
product$: Observable<Product> = this.currentProductService.getProduct(
ProductScope.ATTRIBUTES
);
constructor(protected currentProductService: CurrentProductService) {}
}
<ng-container *ngIf="product$ | async as product">
<div class="container">
<h2>{{ 'productDetails.specification' | cxTranslate }}</h2>
<table *ngFor="let class of product?.classifications">
<th>
<h3>{{ class.name }}</h3>
</th>
<tr *ngFor="let feature of class.features">
<td>{{ feature.name }}</td>
<td>
<ul>
<li *ngFor="let featureValue of feature?.featureValues">
{{ featureValue?.value }}
<span
*ngIf="
feature.featureUnit?.symbol?.length > 0 &&
feature.featureUnit.unitType != '300'
"
>
{{ feature.featureUnit.symbol }}
</span>
</li>
</ul>
</td>
</tr>
</table>
</div>
</ng-container>
Legend
Html element with directive