src/app/myorders/myorders.component.ts
OnInit
selector | app-myorders |
styleUrls | ./myorders.component.css |
templateUrl | ./myorders.component.html |
Properties |
Methods |
constructor(route: ActivatedRoute, http: HttpClient)
|
|||||||||
Defined in src/app/myorders/myorders.component.ts:22
|
|||||||||
Parameters :
|
getOrderDetails |
getOrderDetails()
|
Defined in src/app/myorders/myorders.component.ts:33
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Defined in src/app/myorders/myorders.component.ts:26
|
Returns :
void
|
order |
Type : Order
|
Defined in src/app/myorders/myorders.component.ts:22
|
orderId |
Type : string
|
Defined in src/app/myorders/myorders.component.ts:21
|
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
interface Order {
_id: string;
user: string;
cart: string;
status: 'Pending' | 'Processing' | 'Shipped' | 'Delivered';
createdAt: Date;
paymentMethod: 'online' | 'cash-on-delivery';
}
@Component({
selector: 'app-myorders',
templateUrl: './myorders.component.html',
styleUrls: ['./myorders.component.css']
})
export class MyordersComponent implements OnInit {
orderId: string;
order: Order;
constructor(private route: ActivatedRoute, private http: HttpClient) { }
ngOnInit(): void {
this.route.params.subscribe(params => {
this.orderId = params['orderId'];
this.getOrderDetails();
});
}
getOrderDetails(): void {
this.http.get<Order>(`http://localhost:3000/orders/${this.orderId}`)
.subscribe(
(response) => {
this.order = response;
},
(error) => {
console.error('Error retrieving order details:', error);
}
);
}
}
<div class="container">
<div *ngIf="order">
<h2>Order Details</h2>
<p><strong>Order ID:</strong> {{ order._id }}</p>
<p><strong>Order Status:</strong> {{ order.status }}</p>
<!-- <p><strong>Order User:</strong> {{ order.user }}</p> -->
<p><strong>Order created at:</strong> {{ order.createdAt }}</p>
<p><strong>Payment method:</strong> {{ order.paymentMethod }}</p>
<!-- Add more order details as needed -->
</div>
<div *ngIf="!order">
<p>Loading order details...</p>
</div>
</div>
./myorders.component.css
.container {
margin: 20px;
padding: 20px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 5px;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
margin-bottom: 5px;
}
strong {
font-weight: bold;
}
.loading-message {
font-style: italic;
color: #777;
}