File

src/app/checkout/cart/cart.component.ts

Implements

OnInit

Metadata

selector app-cart
styleUrls cart.component.scss
templateUrl ./cart.component.html

Constructor

constructor(store: Store)

Methods

ngOnInit
ngOnInit()
Returns: void

Properties

totalCartItems$
totalCartItems$: Observable<number>
totalCartValue$
totalCartValue$: Observable<number>
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>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""