### File

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

### Implements

`OnInit` `OnDestroy`

### Metadata

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

### Constructor

`constructor(store: Store, checkoutService: CheckoutService, router: Router)`
Defined in src/app/checkout/address/address.component.ts:21

### Methods

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

checkoutToPayment
`checkoutToPayment()`
Defined in src/app/checkout/address/address.component.ts:35
Returns: `void`

ngOnDestroy
`ngOnDestroy()`
Defined in src/app/checkout/address/address.component.ts:47
Returns: `void`

### Properties

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

orderState
`orderState: `string``
Defined in src/app/checkout/address/address.component.ts:19

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

stateSub$
`stateSub$: `Subscription``
Defined in src/app/checkout/address/address.component.ts:18

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

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

      stateSub$: Subscription;
      orderState: string;
      orderNumber$: Observable<number>;
      shipAddress$: Observable<Address>;

      constructor(private store: Store<AppState>,
        private checkoutService: CheckoutService,
        private router: Router) {
          this.orderNumber$ = this.store.select(getOrderNumber);
          this.shipAddress$ = this.store.select(getShipAddress);
          this.stateSub$ = this.store.select(getOrderState)
            .subscribe(state => this.orderState = state);
      }

      ngOnInit() {
      }

      checkoutToPayment() {
        if (this.orderState === 'delivery' || this.orderState === 'address') {
          this.checkoutService.changeOrderState()
            .do(() => {
              this.router.navigate(['/checkout', 'payment']);
            })
            .subscribe();
        } else {
          this.router.navigate(['/checkout', 'payment']);
        }
      }

      ngOnDestroy() {
        if (this.orderState === 'delivery') {
          this.checkoutService.changeOrderState()
            .subscribe();
        }
        this.stateSub$.unsubscribe();
      }

    }

    <div class="address-section">
    	<div *ngIf="(shipAddress$ | async)">
    		<div class="left">
    			<div class="edit-address">
    				<span class="edit-label">
    					Select Delivery Address
    				</span>
    			</div>
    			<app-delivery-address [address]="(shipAddress$ | async)"></app-delivery-address>
    		</div>
    		<div class="right">
    			<app-delivery-options [orderNumber]="orderNumber$ | async"></app-delivery-options>
    			<button (click)="checkoutToPayment()" class="pay-btn">CONTINUE TO PAYMENT</button>
    		</div>
    	</div>
    	<div *ngIf="!(shipAddress$ | async)">
    		<div class="left">
    			<div class="add-address">
    				<span class="add-label">
    					ADD NEW ADDRESS
    				</span>
    			</div>
    			<app-add-address></app-add-address>
    		</div>
    	</div>
    </div>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""