File
Implements
Metadata
selector |
app-address |
styleUrls |
address.component.scss |
templateUrl |
./address.component.html |
Methods
ngOnInit
|
ngOnInit()
|
|
Returns: void
|
checkoutToPayment
|
checkoutToPayment()
|
|
Returns: void
|
ngOnDestroy
|
ngOnDestroy()
|
|
Returns: void
|
orderNumber$
|
orderNumber$: Observable<number>
|
|
orderState
|
orderState: string
|
|
stateSub$
|
stateSub$: Subscription
|
|
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 with directive