### 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)`
Defined in src/app/checkout/cart/cart.component.ts:19

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/checkout/cart/cart.component.ts:26
Returns: `void`

### Properties

totalCartItems$
`totalCartItems$: `Observable<number>``
Defined in src/app/checkout/cart/cart.component.ts:19

totalCartValue$
`totalCartValue$: `Observable<number>``
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>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""