Update
<div style="padding: 30px;">
<h2>Update Menu</h2>
<form (ngSubmit)="updateMenu()">
<label>Menu Name: <input [(ngModel)]="menuData.menuName" name="menuName" required /></label><br><br>
<label>Description: <input [(ngModel)]="menuData.description" name="description" /></label><br><br>
<label>Category: <input [(ngModel)]="menuData.category" name="category" required /></label><br><br>
<label>Type: <input [(ngModel)]="menuData.type" name="type" required /></label><br><br>
<label>Cost: <input type="number" [(ngModel)]="menuData.cost" name="cost" required /></label><br><br>
<label>Status: <input [(ngModel)]="menuData.status" name="status" required /></label><br><br>
<button type="submit">Update</button>
</form>
</div>
App.module.ts
import { FormsModule } from '@angular/forms';
@NgModule({
...
imports: [
BrowserModule,
AppRoutingModule,
FormsModule // ✅ This is required for [(ngModel)]
],
})
Updatemenu.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MenuService, MenuItem } from '../services/menu.service';
@Component({
selector: 'app-update-menu',
templateUrl: './update-menu.component.html',
styleUrls: ['./update-menu.component.css']
})
export class UpdateMenuComponent implements OnInit {
menuId!: string;
menuData: MenuItem = {
menuId: '',
menuName: '',
description: '',
category: '',
type: '',
cost: 0,
status: ''
};
constructor(
private route: ActivatedRoute,
private router: Router,
private menuService: MenuService
) {}
ngOnInit(): void {
this.menuId = this.route.snapshot.paramMap.get('id')!;
this.menuService.getMenuById(this.menuId).subscribe({
next: (data) => this.menuData = data,
error: () => alert('Could not load menu item.')
});
}
updateMenu(): void {
this.menuService.updateMenu(this.menuId, this.menuData).subscribe({
next: () => {
alert('Menu item updated!');
this.router.navigate(['/menu-list']);
},
error: () => alert('Update failed.')
});
}
}
Menu.service.ts
getMenuById(id: string): Observable<MenuItem> {
return this.http.get<MenuItem>(`${this.apiUrl}/${id}`);
}
updateMenu(id: string, data: MenuItem): Observable<MenuItem> {
return this.http.put<MenuItem>(`${this.apiUrl}/${id}`, data);
}
...
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'; // ✅ Match your Spring Boot path
constructor(private http: HttpClient) {}
getALL(): Observable<MenuItem[]> {
return this.http.get<MenuItem[]>(this.apiUrl);
}
create(item: MenuItem): Observable<MenuItem> {
return this.http.post<MenuItem>(this.apiUrl, item);
}
delete(menuId: string): Observable<void> {
return this.http.delete<void>(`${this.apiUrl}/${menuId}`);
}
// ✅ New: Get one item
getMenuById(menuId: string): Observable<MenuItem> {
return this.http.get<MenuItem>(`${this.apiUrl}/${menuId}`);
}
// ✅ New: Update item
updateMenu(menuId: string, updatedMenu: MenuItem): Observable<MenuItem> {
return this.http.put<MenuItem>(`${this.apiUrl}/${menuId}`, updatedMenu);
}
}
Comments
Post a Comment