Scribd
Upload
11 views2 pages

Challenge Snippets

The document contains code for displaying order details in Angular. It includes an order component with a table to display a list of orders and an order-detailed component to display the items, pricing and summary for a selected order. The order component contains a table with order information for each order. The order-detailed component displays order item details, calculates subtotals and totals, and displays the order summary.

Uploaded by

Matias Damico
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views2 pages

Challenge Snippets

The document contains code for displaying order details in Angular. It includes an order component with a table to display a list of orders and an order-detailed component to display the items, pricing and summary for a selected order. The order component contains a table with order information for each order. The order-detailed component displays order item details, calculates subtotals and totals, and displays the order summary.

Uploaded by

Matias Damico
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

====================

Order.component.html
====================

<div class="container mt-5">


<div class="row">
<div class="col-12">
<table class="table table-hover" style="cursor: pointer;">
<thead class="thead-light">
<tr>
<th>Order</th>
<th>Date</th>
<th>Total</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let order of orders"
routerLink="/orders/{{order.id}}">
<th># {{order.id}}</th>
<td>{{order.orderDate | date: 'medium'}}</td>
<td>{{order.total | currency}}</td>
<td>{{order.status}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

=============================
order-detailed.component.html
=============================

<div class="container mt-5">


<div class="row" *ngIf="order">
<div class="col-8">
<div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col" class="border-0 bg-light">
<div class="p-2 text-uppercase">Product</div>
</th>
<th scope="col" class="border-0 bg-light">
<div class="py-2 text-uppercase">Price</div>
</th>
<th scope="col" class="border-0 bg-light">
<div class="py-2 text-uppercase">Quantity</div>
</th>
<th scope="col" class="border-0 bg-light">
<div class="py-2 text-uppercase">Total</div>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of order.orderItems">
<th scope="row">
<div class="p-2">
<img src="{{item.pictureUrl}}" alt="{{item.productName}}"
class="img-fluid"
style="max-height: 50px">
<div class="ml-3 d-inline-block align-middle">
<h5 class="mb-0">
{{item.productName}}
</h5>
</div>
</div>
</th>
<td class="align-middle"><strong>{{item.price |
currency}}</strong></td>
<td class="align-middle">
<span class="font-weight-bold px-2">{{item.quantity}}</span>
</td>
<td class="align-middle"><strong>{{item.price * item.quantity |
currency}}</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-4">
<div class="bg-light px-4 py-3 text-uppercase font-weight-bold">Order
summary</div>
<div class="p-4">
<ul class="list-unstyled mb-1">
<li class="d-flex justify-content-between py-3 border-bottom">
<strong class="text-muted">Order subtotal</strong>
<strong>{{order.subtotal | currency}}</strong>
</li>
<li class="d-flex justify-content-between py-3 border-bottom">
<strong class="text-muted">Shipping and handling</strong>
<strong>{{order.shippingPrice | currency}}</strong>
</li>
<li class="d-flex justify-content-between py-3 border-bottom">
<strong class="text-muted">Total</strong>
<strong>{{order.total | currency}}</strong>
</li>
</ul>
</div>
</div>
</div>
</div>

You might also like