Menu form1

 Menuform component ts



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

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


@Component({

  selector: 'app-menu-form',

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

})

export class MenuFormComponent {

  newItem: MenuItem = {

    menuId: '',

    menuName: '',

    description: '',

    category: '',

    type: '',

    cost: 0,

    status: ''

  };


  constructor(private menuService: MenuService) {}


  submitForm(): void {

    if (!this.newItem.menuId || !this.newItem.menuName) {

      alert('Menu ID and Name are required.');

      return;

    }


    this.menuService.create(this.newItem).subscribe(() => {

      alert('Menu item added successfully!');

      // Clear form

      this.newItem = {

        menuId: '',

        menuName: '',

        description: '',

        category: '',

        type: '',

        cost: 0,

        status: ''

      };

    });

  }

}







Html




<h2>Add New Menu Item</h2>


<form (ngSubmit)="submitForm()">

  <label>Menu ID:</label><br>

  <input [(ngModel)]="newItem.menuId" name="menuId" required><br><br>


  <label>Menu Name:</label><br>

  <input [(ngModel)]="newItem.menuName" name="menuName" required><br><br>


  <label>Description:</label><br>

  <input [(ngModel)]="newItem.description" name="description"><br><br>


  <label>Category:</label><br>

  <input [(ngModel)]="newItem.category" name="category" required><br><br>


  <label>Type:</label><br>

  <input [(ngModel)]="newItem.type" name="type" required><br><br>


  <label>Cost:</label><br>

  <input type="number" [(ngModel)]="newItem.cost" name="cost" required><br><br>


  <label>Status:</label><br>

  <input [(ngModel)]="newItem.status" name="status" required><br><br>


  <button type="submit">Add Item</button>

</form>







Menu service.ts



create(item: MenuItem): Observable<MenuItem> {

  return this.http.post<MenuItem>(this.apiUrl, item);

}







App.module ts



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





import { MenuFormComponent } from './menu-form/menu-form.component';


@NgModule({

  declarations: [

    AppComponent,

    MenuListComponent,

    MenuFormComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpClientModule

  ],

  ...

})







App.componet html



<h1>🍽 Online Restaurant Menu</h1>


<!-- Show the Add Form -->

<app-menu-form></app-menu-form>


<br><hr><br>


<!-- Show the Menu List -->

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



Comments

Post a Comment

Popular posts from this blog

Restaurant

Model.java  package com.example.restaurant.model; import jakarta.persistence.*; @Entity @Table(name = "Menu_2797212") public class Model {     @Id     @Column(name = "menuid", nullable = false, unique = true)     private String menuId;     @Column(name = "menuname", nullable = false)     private String menuName;     @Column(name = "description")     private String description;     @Column(name = "category", nullable = false)     private String category;     @Column(name = "type", nullable = false)     private String type;     @Column(name = "cost", nullable = false)     private double cost;     @Column(name = "status", nullable = false)     private String status;     // Constructors     public Model() {}     public Model(String menuId, String menuName, String description, String category, String type, dou...
Read more

TimePass

Subject: GenAI Event: Learning, Quizzing & Our Values in Action! Hello Everyone, What an energetic day it was yesterday (Thursday, June 19, 2025) at our special GenAI event in Thane! It was a fantastic session focused on Generative AI, bringing together both fun and deep discussions. The event kicked off with two brilliant skits that truly brought our LIRIL values to life. They were a creative and engaging way to remind us about the core principles that guide us at TCS. It was a wonderful start! Next, the GenAI Quiz Competition really got our minds buzzing! It was a lively and challenging round of questions that tested our knowledge of Generative AI's concepts, applications, and latest trends. Everyone participated with great spirit, making it a truly insightful and competitive segment. A big highlight for us was the Group Discussion on "Is AI Useful or Harmful?" Several associates from our batch actively participated , sharing their thoughts and perspectives. It wa...
Read more

UIUXFILES

 <!DOCTYPE html> <html> <head>     <title>Login</title>     <style>         body { font-family: sans-serif; }         .container { width: 200px; margin: 50px auto; }         input { width: 100%; padding: 8px; margin-bottom: 10px; box-sizing: border-box; }         button { width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; cursor: pointer; }     </style> </head> <body>     <div class="container">         <h2>Login</h2>         <form>             <input type="text" placeholder="Username" required>             <input type="password" placeholder="Password" required>             <button type="submit">Log In</butt...
Read more