This article explain how to make a Inventory Management App in Angular.this app explain the complete module of the Inventory sales management system in Angular.if want to make a point of sales system in Angular this is right place where you will able to learn
Install the Angular
$ npm create vite@latest
Paste the Following code inside the app.component.html
<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();
}
}