### File

`src/app/checkout/payment/payment.component.ts`

### Implements

`OnInit`

### Metadata

selector | `app-payment`
styleUrls | `payment.component.scss`
templateUrl | `./payment.component.html`

### Constructor

`constructor(store: Store)`
Defined in src/app/checkout/payment/payment.component.ts:20

### Methods

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

### Properties

address$
`address$: `Observable<Address>``
Defined in src/app/checkout/payment/payment.component.ts:19

orderNumber$
`orderNumber$: `Observable<number>``
Defined in src/app/checkout/payment/payment.component.ts:20

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

totalCartValue$
`totalCartValue$: `Observable<number>``
Defined in src/app/checkout/payment/payment.component.ts:17

    import { Address } from './../../core/models/address';
    import { CheckoutService } from './../../core/services/checkout.service';
    import { CheckoutActions } from './../actions/checkout.actions';
    import { getTotalCartValue, getOrderNumber, getTotalCartItems, getShipAddress } from './../reducers/selectors';
    import { AppState } from './../../interfaces';
    import { Store } from '@ngrx/store';
    import { Observable } from 'rxjs/Observable';
    import { Component, OnInit, OnDestroy } from '@angular/core';

    @Component({
      selector: 'app-payment',
      templateUrl: './payment.component.html',
      styleUrls: ['./payment.component.scss']
    })
    export class PaymentComponent implements OnInit {

      totalCartValue$: Observable<number>;
      totalCartItems$: Observable<number>;
      address$: Observable<Address>;
      orderNumber$: Observable<number>;

      constructor(private store: Store<AppState>) {
          this.totalCartValue$ = this.store.select(getTotalCartValue);
          this.totalCartItems$ = this.store.select(getTotalCartItems);
          this.address$ = this.store.select(getShipAddress);
          this.orderNumber$ = this.store.select(getOrderNumber);
      }

      ngOnInit() {
      }

    }

    <div class="payment-section">
    	<div class="left">
    		<div class="payment-header">
    			<span class="lbl">Choose Payment Mode</span>
    			<span class="amt you-pay">
    				<span class="amt">You Pay</span>
    				<span class="you-pay">${{totalCartValue$ | async | number:'1.2-2'}}</span>
    			</span>
    		</div>
    		<div class="pay-body">
    			<app-payment-modes-list [orderNumber]="orderNumber$ | async" [paymentAmount]="totalCartValue$ | async"></app-payment-modes-list>
    		</div>
    	</div>
    	<div class="right">
    		<div class="mini-bag-summary">
    			<div class="lbl">ORDER SUMMARY</div>
    			<div class="items">{{totalCartItems$ | async}} ITEMS</div>
    			<div class="order-total">
    				<span>Order Total</span>
    				<span class="value">${{totalCartValue$ | async | number:'1.2-2'}}</span>
    			</div>
    			<div class="shipping">
    				<span>Delivery</span>
    				<span class="shipping-fee c-green">FREE</span>
    			</div>
    		</div>
    		<div class="pay-lbl-total">
    			<span class="pay-lbl">Total Payable</span>
    			<span class="pay-total">${{totalCartValue$ | async | number:'1.2-2'}}</span>
    		</div>
    		<div class="address-summary">
    			<div class="address-lbl">DELIVER TO</div>
    			<div class="name">{{(address$ | async).full_name}}</div>
    			<div class="add-info">{{(address$ | async).address1}}</div>
    			<div class="add-info">{{(address$ | async).address2}}</div>
    			<div class="add-info">{{(address$ | async).city}} - {{(address$ | async).zipcode}}</div>
    			<!--<div class="add-info">Maharashtra</div>-->
    			<div class="add-info">Mobile: {{(address$ | async).phone}}</div>
    		</div>
    	</div>
    </div>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""