File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-product-summary |
| templateUrl |
./product-summary.component.html |
|
outlets
|
Default value : ProductDetailOutlets
|
|
|
|
product$
|
Type : Observable<Product>
|
Default value : this.currentProductService.getProduct([
ProductScope.DETAILS,
ProductScope.PRICE,
])
|
|
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Product, ProductScope } from '@spartacus/core';
import { Observable } from 'rxjs';
import { CurrentProductService } from '../current-product.service';
import { ProductDetailOutlets } from '../product-outlets.model';
@Component({
selector: 'cx-product-summary',
templateUrl: './product-summary.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProductSummaryComponent {
outlets = ProductDetailOutlets;
product$: Observable<Product> = this.currentProductService.getProduct([
ProductScope.DETAILS,
ProductScope.PRICE,
]);
constructor(protected currentProductService: CurrentProductService) {}
}
<ng-container *ngIf="product$ | async as product">
<ng-template
[cxOutlet]="outlets.PRICE"
[cxOutletContext]="{ product: product }"
>
<div
[attr.aria-label]="'productSummary.newItemPrice' | cxTranslate"
class="price"
>
{{ product?.price?.formattedValue }}
</div>
</ng-template>
<ng-template
[cxOutlet]="outlets.SUMMARY"
[cxOutletContext]="{ product: product }"
>
<p [innerHTML]="product?.summary" class="summary"></p>
</ng-template>
<!-- @TODO: Temp. Comment out share link while not in use by CMS -->
<!-- <ng-container *cxOutlet="outlets.SHARE">
<div>
<a href="#" class="share btn-link">
{{ 'productSummary.share' | cxTranslate }}
</a>
</div>
</ng-container> -->
</ng-container>
Legend
Html element with directive