Appmodule.tcs

 import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

import { MenuListComponent } from './menu-list/menu-list.component';

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

@NgModule({

  declarations: [

    AppComponent,

    MenuListComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpClientModule

  ],

  providers: [MenuService],

  bootstrap: [AppComponent]

})

export class AppModule { }

App components html

<h1>🍽 Online Restaurant Menu</h1>

<app-menu-list></app-menu-list>

Menu.service ts

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs';

export interface MenuItem {

  menuId: string;

  menuName: string;

  description: string;

  category: string;

  type: string;

  cost: number;

  status: string;

}

@Injectable({

  providedIn: 'root'

})

export class MenuService {

  private apiUrl = 'http://localhost:8080/api/menu'; // Spring Boot endpoint

  constructor(private http: HttpClient) {}

  getAll(): Observable<MenuItem[]> {

    return this.http.get<MenuItem[]>(this.apiUrl);

  }

  delete(menuId: string): Observable<void> {

    return this.http.delete<void>(`${this.apiUrl}/${menuId}`);

  }

}