This article explain how to make a Fish 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">
<div class="card">
<!-- Header -->
<div class="card-header">Fish Inventory</div>
<!-- Fish Selection -->
<div class="form-group">
<label>Fish</label>
<select [(ngModel)]="option" class="form-control">
<option value="">Please Select</option>
<option value="1">GR</option>
<option value="2">KG</option>
</select>
</div>
<!-- Quantity Input -->
<div class="form-group">
<label>Qty</label>
<input
type="text"
[(ngModel)]="qty"
class="form-control"
placeholder="Qty"
/>
</div>
<!-- Buttons -->
<div class="button-group">
<button type="button" class="calculate" (click)="calculate()">
Calculate
</button>
<button type="button" class="reset" (click)="reset()">
Reset
</button>
</div>
<!-- Error Message -->
<!-- Total Display -->
<div class="total">Total: ${{ total }}</div>
</div>
</div>
Paste the Following code inside the app.component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
imports: [FormsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
option: string = '';
qty: string = '';
total: string | null = null;
error: string = '';
calculate() {
this.error = '';
const quantity = parseFloat(this.qty);
if (isNaN(quantity) || quantity <= 0) {
this.error = 'Please enter a valid quantity.';
return;
}
let result = 0;
if (this.option === '1') {
result = (quantity / 1000) * 140;
} else if (this.option === '2') {
result = quantity * 140;
} else {
this.error = 'Invalid selection.';
return;
}
this.total = result.toFixed(2);
}
reset() {
this.option = '';
this.qty = '';
this.total = null;
this.error = '';
}
}
Paste the Following code inside the app.component.scss
/* Container */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Card Styles */
.card {
width: 350px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
.card-header {
background-color: rgb(255, 0, 13);
padding: 10px;
text-align: center;
border-radius: 4px 4px 0 0;
color: #fff;
font-weight: bold;
}
}
/* Input and Select Styles */
.form-group {
margin-top: 10px;
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-control {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
}
/* Button Styles */
.button-group {
margin-top: 20px;
display: flex;
justify-content: space-between;
button {
padding: 8px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
&.calculate {
background-color: #28a745;
color: #fff;
}
&.reset {
background-color: #ffc107;
color: #000;
}
}
}
/* Error Message */
.error-message {
margin-top: 10px;
color: rgb(102, 0, 255);
text-align: center;
}
/* Total Display */
.total {
margin-top: 20px;
font-size: 16px;
font-weight: bold;
text-align: center;
}
I have Attached the Video go through the video and make the application