Menu list

Ts

Ok

 import { Component, OnInit } from '@angular/core';

import { MenuService, MenuItem } from '../menu.service';

@Component({

  selector: 'app-menu-list',

  templateUrl: './menu-list.component.html'

})

export class MenuListComponent implements OnInit {

  menuItems: MenuItem[] = [];

  constructor(private menuService: MenuService) {}

  ngOnInit(): void {

    this.loadItems();

  }

  loadItems(): void {

    this.menuService.getAll().subscribe(data => {

      this.menuItems = data;

    });

  }

  deleteItem(menuId: string): void {

    if (confirm(`Are you sure you want to delete ${menuId}?`)) {

      this.menuService.delete(menuId).subscribe(() => {

        this.loadItems();

      });

    }

  }

}

Html

<h2>Restaurant Menu</h2>

<table border="1" cellpadding="8">

  <tr>

    <th>Menu ID</th>

    <th>Name</th>

    <th>Description</th>

    <th>Category</th>

    <th>Type</th>

    <th>Cost</th>

    <th>Status</th>

    <th>Action</th>

  </tr>

  <tr *ngFor="let item of menuItems">

    <td>{{ item.menuId }}</td>

    <td>{{ item.menuName }}</td>

    <td>{{ item.description }}</td>

    <td>{{ item.category }}</td>

    <td>{{ item.type }}</td>

    <td>{{ item.cost }}</td>

    <td>{{ item.status }}</td>

    <td>

      <button (click)="deleteItem(item.menuId)">Delete</button>

    </td>

  </tr>

</table>