File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-configurator-price-summary |
| templateUrl |
./configurator-price-summary.component.html |
|
configuration$
|
Type : Observable<Configurator.Configuration>
|
Default value : this.configRouterExtractorService.extractRouterData().pipe(
switchMap((routerData) => {
return this.configuratorCommonsService.getConfiguration(
routerData.owner
);
})
)
|
|
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ConfiguratorRouterExtractorService } from '@spartacus/product-configurator/common';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { ConfiguratorCommonsService } from '../../core/facade/configurator-commons.service';
import { Configurator } from '../../core/model/configurator.model';
@Component({
selector: 'cx-configurator-price-summary',
templateUrl: './configurator-price-summary.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConfiguratorPriceSummaryComponent {
configuration$: Observable<Configurator.Configuration> =
this.configRouterExtractorService.extractRouterData().pipe(
switchMap((routerData) => {
return this.configuratorCommonsService.getConfiguration(
routerData.owner
);
})
);
constructor(
protected configuratorCommonsService: ConfiguratorCommonsService,
protected configRouterExtractorService: ConfiguratorRouterExtractorService
) {}
}
<ng-container *ngIf="configuration$ | async as configuration">
<div class="cx-price-summary-container">
<div class="cx-total-summary">
<div class="cx-summary-row cx-base-price">
<div class="cx-label">
{{ 'configurator.priceSummary.basePrice' | cxTranslate }}:
</div>
<div class="cx-amount">
{{ configuration?.priceSummary?.basePrice?.formattedValue }}
</div>
</div>
<div class="cx-summary-row cx-selected-options">
<div class="cx-label">
{{ 'configurator.priceSummary.selectedOptions' | cxTranslate }}:
</div>
<div class="cx-amount">
{{ configuration?.priceSummary?.selectedOptions?.formattedValue }}
</div>
</div>
<div class="cx-summary-row cx-total-price">
<div class="cx-label">
{{ 'configurator.priceSummary.totalPrice' | cxTranslate }}:
</div>
<div class="cx-amount">
{{ configuration?.priceSummary?.currentTotal?.formattedValue }}
</div>
</div>
</div>
</div>
</ng-container>
Legend
Html element with directive