src/app/user/components/orders/orders.component.ts
selector | app-orders |
styleUrls | orders.component.scss |
templateUrl | ./orders.component.html |
constructor(store: Store
|
ngOnInit |
ngOnInit()
|
Returns:
void
|
orders$ |
orders$: |
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from '../../../interfaces';
import { UserActions } from '../../actions/user.actions';
import { Observable } from 'rxjs/Observable';
import { Order } from '../../../core/models/order';
import { getUserOrders } from '../../reducers/selector';
@Component({
selector: 'app-orders',
templateUrl: './orders.component.html',
styleUrls: ['./orders.component.scss']
})
export class OrdersComponent implements OnInit {
orders$: Observable<Order[]>;
constructor(
private store: Store<AppState>,
private userActions: UserActions
) {
this.orders$ = this.store.select(getUserOrders);
}
ngOnInit() {
this.store.dispatch(this.userActions.getUserOrders());
}
}
<div *ngIf="(orders$ | async).length; else elseBlock">
<div *ngFor="let order of orders$ | async">
<app-order-list-item [order]="order"></app-order-list-item>
</div>
</div>
<ng-template #elseBlock>
<div class="cart-empty">
<div class="empty-cart-icon"></div>
<div class="empty-cart-message">You have'nt ordered anything yet.</div>
<a class="empty-wishlist-link" routerLink="/home">Start Shopping</a>
</div>
</ng-template>