#7 CRUD Made Simple

 Here's a well-structured blog post based on your content:

---

CRUD Made Simple: A Step-by-Step Guide to Angular 19 CRUD Operations

Creating a CRUD (Create, Read, Update, Delete) application in Angular 19 has never been easier! In this tutorial, we'll build a simple employee management system using Bootstrap, Reactive Forms, and Local Storage.

Let's dive in! 🚀

---

Step 1: Create a New Angular Project

First, create a new Angular project using the following command:

ng new ang19-crud

Navigate into the project folder:

cd ang19-crud

Start the development server:

ng serve

This will launch your Angular app at http://localhost:4200/. 🎉

---

Step 2: Install Bootstrap for Styling

To add Bootstrap, run:

npm i bootstrap

Then, update the styles section in angular.json to include Bootstrap:

"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

Now, your app is ready for a clean and responsive UI! 🎨

---

Step 3: Create the Employee Model

Inside the src/app folder, create a model folder and add a new file Employee.ts:

export class EmployeeModel {
  empid: number;
  name: string;
  city: string;
  state: string;
  emailId: string;
  contactNo: string;
  address: string;
  pinCode: string;

  constructor() {
    this.address = '';
    this.city = '';
    this.contactNo = '';
    this.emailId = '';
    this.empid = 1;
    this.name = '';
    this.state = '';
    this.pinCode = '';
  }
}

This model defines the structure of an employee object.

---

Step 4: Build the Employee List UI

Modify app.component.html to include the Employee List Table and Employee Form:

<div class="row">
  <!-- Employee List -->
  <div class="col-8">
    <div class="card">
      <div class="card-header bg-success">
        <h6>Employee List</h6>
      </div>
      <div class="card-body">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>Sr No</th>
              <th>Name</th>
              <th>Contact No</th>
              <th>Email-Id</th>
              <th class="text-center">Action</th>
            </tr>
          </thead>
          <tbody>
            @for (item of employeeList; track $index) {
              <tr>
                <td>{{$index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.contactNo}}</td>
                <td>{{item.emailId}}</td>
                <td class="text-center">
                  <button class="btn btn-primary" (click)="onEdit(item)">Edit</button>
                  <button class="btn btn-danger mx-2" (click)="onDelete(item.empid)">Delete</button>
                </td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Employee Form -->
  <div class="col-4">
    <div class="card">
      <div class="card-header bg-success">New Employee</div>
      <div class="card-body">
        <form [formGroup]="employeeForm">
          <div class="row">
            <div class="col-12">
              <label>Name</label>
              <input type="text" formControlName="name" class="form-control">
            </div>
            <div class="col-6">
              <label>Email-Id</label>
              <input type="text" formControlName="emailId" class="form-control">
            </div>
            <div class="col-6">
              <label>Contact No</label>
              <input type="text" formControlName="contactNo" class="form-control">
            </div>
            <div class="col-6">
              <label>City</label>
              <input type="text" formControlName="city" class="form-control">
            </div>
            <div class="col-6">
              <label>State</label>
              <input type="text" formControlName="state" class="form-control">
            </div>
            <div class="col-6">
              <label>Pin Code</label>
              <input type="text" formControlName="pinCode" class="form-control">
            </div>
            <div class="col-12">
              <label>Address</label>
              <textarea formControlName="address" class="form-control"></textarea>
            </div>
          </div>
          <div class="row pt-2">
            <div class="col-6 text-center">
              <button class="btn btn-secondary" type="button" (click)="reset()">Reset</button>
            </div>
            <div class="col-6 text-center">
              @if(employeeForm.controls['empid'].value == '1') {
                <button class="btn btn-success" [disabled]="employeeForm.invalid" (click)="onSave()">Save</button>
              } @else {
                <button class="btn btn-warning" [disabled]="employeeForm.invalid" (click)="onUpdate()">Update</button>
              }
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

---

Step 5: Implement CRUD Operations in app.component.ts

Now, let's define CRUD functionalities:

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { EmployeeModel } from './model/Employee';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  employeeForm: FormGroup;
  employeeObj: EmployeeModel = new EmployeeModel();
  employeeList: EmployeeModel[] = [];

  constructor() {
    this.createForm();
    const oldData = localStorage.getItem("EmpData");
    if (oldData) {
      this.employeeList = JSON.parse(oldData);
    }
  }

  reset() {
    this.employeeObj = new EmployeeModel();
    this.createForm();
  }

  createForm() {
    this.employeeForm = new FormGroup({
      empid: new FormControl(this.employeeObj.empid),
      name: new FormControl(this.employeeObj.name, [Validators.required]),
      city: new FormControl(this.employeeObj.city),
      address: new FormControl(this.employeeObj.address),
      contactNo: new FormControl(this.employeeObj.contactNo),
      emailId: new FormControl(this.employeeObj.emailId),
      pinCode: new FormControl(this.employeeObj.pinCode, [Validators.required, Validators.minLength(6)]),
      state: new FormControl(this.employeeObj.state)
    });
  }

  onSave() {
    this.employeeList.unshift(this.employeeForm.value);
    localStorage.setItem("EmpData", JSON.stringify(this.employeeList));
    this.reset();
  }

  onEdit(item: EmployeeModel) {
    this.employeeObj = item;
    this.createForm();
  }

  onUpdate() {
    const record = this.employeeList.find(m => m.empid == this.employeeForm.controls['empid'].value);
    if (record) {
      Object.assign(record, this.employeeForm.value);
    }
    localStorage.setItem("EmpData", JSON.stringify(this.employeeList));
    this.reset();
  }

  onDelete(id: number) {
    if (confirm("Are you sure you want to delete?")) {
      this.employeeList = this.employeeList.filter(m => m.empid !== id);
      localStorage.setItem("EmpData", JSON.stringify(this.employeeList));
    }
  }
}

---

Final Touch: Add Styling

In app.component.css:

.form-control {
  border: 1px solid gray !important;
}

---

🎉 Conclusion

You've successfully built a simple Angular 19 CRUD application using Bootstrap and Local Storage. 🚀

Would you like to extend this tutorial by integrating an API backend? Let me know in the comments! 😃