File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-mini-cart |
| templateUrl |
./mini-cart.component.html |
|
iconTypes
|
Default value : ICON_TYPE
|
|
|
|
quantity$
|
Type : Observable<number>
|
Default value : this.activeCartService.getActive().pipe(
startWith({ deliveryItemsQuantity: 0 }),
map((cart) => cart.deliveryItemsQuantity || 0)
)
|
|
|
|
total$
|
Type : Observable<string>
|
Default value : this.activeCartService.getActive().pipe(
filter((cart) => !!cart.totalPrice),
map((cart) => cart.totalPrice.formattedValue)
)
|
|
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ActiveCartService } from '@spartacus/core';
import { Observable } from 'rxjs';
import { filter, map, startWith } from 'rxjs/operators';
import { ICON_TYPE } from '../../misc/icon/icon.model';
@Component({
selector: 'cx-mini-cart',
templateUrl: './mini-cart.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MiniCartComponent {
iconTypes = ICON_TYPE;
quantity$: Observable<number> = this.activeCartService.getActive().pipe(
startWith({ deliveryItemsQuantity: 0 }),
map((cart) => cart.deliveryItemsQuantity || 0)
);
total$: Observable<string> = this.activeCartService.getActive().pipe(
filter((cart) => !!cart.totalPrice),
map((cart) => cart.totalPrice.formattedValue)
);
constructor(protected activeCartService: ActiveCartService) {}
}
<a
[attr.aria-label]="
'miniCart.item' | cxTranslate: { count: quantity$ | async }
"
[routerLink]="{ cxRoute: 'cart' } | cxUrl"
>
<cx-icon [type]="iconTypes.CART"></cx-icon>
<span class="total">
{{ 'miniCart.total' | cxTranslate: { total: total$ | async } }}
</span>
<span class="count">
{{ 'miniCart.count' | cxTranslate: { count: quantity$ | async } }}
</span>
</a>
Legend
Html element with directive