File

src/app/myorders/myorders.component.ts

Implements

OnInit

Metadata

Index

Properties
Methods

Constructor

constructor(route: ActivatedRoute, http: HttpClient)
Parameters :
Name Type Optional
route ActivatedRoute No
http HttpClient No

Methods

getOrderDetails
getOrderDetails()
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

order
Type : Order
orderId
Type : string
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;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""