File

src/app/userorders/userorders.component.ts

Metadata

Index

Properties
Methods

Constructor

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

Methods

ngOnInit
ngOnInit()
Returns : void
viewAllOrders
viewAllOrders()
Returns : void

Properties

Private _isLoggedIn
Type : boolean
Default value : false
order
Type : Order[]
orderId
Type : string
userId
Type : string
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';

export interface Order {
  _id: string;
  user: string;
  cart: string;
  status: 'Pending' | 'Processing' | 'Shipped' | 'Delivered';
  createdAt: Date;
  paymentMethod: string;
  address: string;
  phone: string;
}


@Component({
  selector: 'app-userorders',
  templateUrl: './userorders.component.html',
  styleUrls: ['./userorders.component.css']
})
export class UserordersComponent {
  userId!: string;
  orderId!: string;
  order: Order[];

  private _isLoggedIn: boolean = false; // private backing field for isLoggedIn

  constructor(
    private http: HttpClient,
    private route: ActivatedRoute,
    private router: Router
  ) {
    const token = localStorage.getItem('token');
    if (token) {
      this._isLoggedIn = true;
    }
  }

  ngOnInit(): void {
    this.route.params.subscribe((params) => {
      this.userId = params['userId'];
    });

    this.viewAllOrders();
  }

  viewAllOrders() {
    this.http.get<Order[]>(`http://localhost:3000/orders/user/${this.userId}`).subscribe(
      (orders) => {
        this.order = orders;
        // Process the retrieved orders
        console.log('Retrieved orders:', orders);
        // Handle the orders as needed, e.g., assign them to a property for display
      },
      (error) => {
        console.error('Error retrieving orders:', error);
      }
    );
  }
}

<h1 class="mt-2">My All Orders</h1>

<div class="table-responsive mt-5">
  <table class="table table-striped table-bordered table-hover" *ngIf="order">
    <thead>
      <tr>
        <th>Order ID</th>
        <th>Order Status</th>
        <th>Order Address</th>
        <th>Order Contact</th>
        <th>Order created at</th>
        <th>Payment method</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let o of order">
        <td>{{ o._id }}</td>
        <td>{{ o.status }}</td>
        <td>{{ o.address }}</td>
        <td>{{ o.phone }}</td>
        <td>{{ o.createdAt }}</td>
        <td>{{ o.paymentMethod }}</td>
      </tr>
    </tbody>
  </table>
</div>



<div *ngIf="!order">
  <p>Oops! No orders yet...</p>
</div>

./userorders.component.css

Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""