Inventory Management System Angular Step by Step

<div class="container-fluid bg-2 text-center">
  <h1>Inventory Management System Angular</h1>
  <br />
  <div class="row">
    <!-- Add Products Section -->
    <div class="col-sm-8">
      <table class="table table-bordered">
        <h3 align="left">Add Products</h3>
        <tr>
          <th>Product Name</th>
          <th>Price</th>
          <th>Qty</th>
          <th>Amount</th>
          <th>Option</th>
        </tr>
        <tr>
          <td>
            <input
              type="text"
              class="form-control"
              placeholder="Item Name"
              [(ngModel)]="name"
            />
          </td>
          <td>
            <input
              type="text"
              class="form-control"
              placeholder="Enter Price"
              [(ngModel)]="price"
              (input)="calculateTotal(price, qty)"
            />
          </td>
          <td>
            <input
              type="number"
              class="form-control"
              placeholder="Enter Qty"
              [(ngModel)]="qty"
              (input)="calculateTotal(price, qty)"
            />
          </td>
          <td>
            <input
              type="text"
              class="form-control"
              placeholder="Enter Total"
              [value]="sum"
              disabled
            />
          </td>
          <td>
            <button class="btn btn-success" (click)="addProduct()">Add</button>
          </td>
        </tr>
      </table>
      <h3 align="left">Products</h3>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Item Name</th>
            <th>Price</th>
            <th>Qty</th>
            <th>Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let user of users">
            <td>{{ user.name }}</td>
            <td>{{ user.price }}</td>
            <td>{{ user.qty }}</td>
            <td>{{ user.sum }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Total Section -->
    <div class="col-sm-4">
      <div class="form-group" align="left">
        <h3>Total</h3>
        <input
          type="text"
          class="form-control"
          placeholder="Enter Total"
          [value]="total"
          disabled
        />
        <br />
        <button class="btn btn-success" (click)="refreshPage()">
          <span>Complete</span>
        </button>
      </div>
    </div>
  </div>
</div>

Paste the Following code inside the app.component.ts

import { NgFor } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';


@Component({
  selector: 'app-root',
  imports: [ FormsModule,NgFor],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'possystem';
  price: number = 0;
  qty: number = 0;
  total: number = 0;
  sum: number = 0;
  name: string = '';
  users: Array<{ name: string; price: number; qty: number; sum: number }> = [];

  // Function to calculate total for a single product
  calculateTotal(price: number, qty: number) {
    this.sum = price * qty;
  }

  // Event handler for adding a product
  addProduct() {
    this.users.push({ name: this.name, price: this.price, qty: this.qty, sum: this.sum });
    this.total = this.users.reduce((total, user) => total + user.sum, 0);

    // Clear input fields
    this.name = '';
    this.price = 0;
    this.qty = 0;
    this.sum = 0;
  }

  // Function to refresh the page
  refreshPage() {
    window.location.reload();
  }
}