src/app/checkout/cart/cart.component.ts
selector | app-cart |
styleUrls | cart.component.scss |
templateUrl | ./cart.component.html |
constructor(store: Store
|
Defined in src/app/checkout/cart/cart.component.ts:19
|
ngOnInit |
ngOnInit()
|
Defined in src/app/checkout/cart/cart.component.ts:26
|
Returns:
void
|
totalCartItems$ |
totalCartItems$: |
Defined in src/app/checkout/cart/cart.component.ts:19
|
totalCartValue$ |
totalCartValue$: |
Defined in src/app/checkout/cart/cart.component.ts:18
|
import { Router } from '@angular/router';
import { getTotalCartValue, getOrderState, getTotalCartItems } from './../reducers/selectors';
import { Observable } from 'rxjs/Observable';
import { CheckoutService } from './../../core/services/checkout.service';
import { CheckoutActions } from './../actions/checkout.actions';
import { AppState } from './../../interfaces';
import { Store } from '@ngrx/store';
import { LineItem } from './../../core/models/line_item';
import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.scss']
})
export class CartComponent implements OnInit {
totalCartValue$: Observable<number>;
totalCartItems$: Observable<number>;
constructor(private store: Store<AppState>) {
this.totalCartValue$ = this.store.select(getTotalCartValue);
this.totalCartItems$ = this.store.select(getTotalCartItems);
}
ngOnInit() {
}
}
<div class="cart-section">
<div *ngIf="(totalCartItems$ | async) > 0 else emptyCart">
<div class="left">
<div class="checkout-header-container">
<div class="checkout-header">
<span class="text">My Shopping Bag ({{totalCartItems$ | async}})</span>
</div>
<div class="total-price">Total: ${{totalCartValue$ | async | number:'1.2-2'}}</div>
</div>
<div class="prod-set">
<app-line-item-list></app-line-item-list>
<a class="wishlist-link">
<span class="icon"></span>
<span class="coming-soon">Add more from wishlist</span>
</a>
</div>
</div>
<div class="right">
<app-order-total-summary [totalCartValue]="totalCartValue$ | async"></app-order-total-summary>
</div>
</div>
<ng-template #emptyCart>
<app-empty-cart></app-empty-cart>
</ng-template>
</div>