Angular JavaScript CRUD Operation Perform | C-Sharp Corner web page | Allrounder Sita Ram Sahu

 Angular JavaScript CRUD Operation Perform  

C-Sharp-Corner Website 

In This blog i am Share A PDF for a CRUD Operation in Angular Framework You Can Download for clicking Click here button Lets Learn Angular and Enjoy Coding.....

Here's a basic CRUD (Create, Read, Update, Delete) application in Angular using a service and local state management.

---

📌 Features:

✅ Add new items
✅ Display a list of items
✅ Edit an existing item
✅ Delete an item

---

Step 1: Install Angular (If Not Installed)

npm install -g @angular/cli
ng new angular-crud
cd angular-crud
ng serve

---

Step 2: Generate Components and Service

ng generate component item
ng generate service item

---

Step 3: Update item.service.ts

This service will manage CRUD operations.

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

@Injectable({
  providedIn: 'root'
})
export class ItemService {
  items: { id: number, name: string }[] = [];

  constructor() {}

  getItems() {
    return this.items;
  }

  addItem(name: string) {
    const newItem = { id: Date.now(), name };
    this.items.push(newItem);
  }

  updateItem(id: number, name: string) {
    const item = this.items.find(item => item.id === id);
    if (item) item.name = name;
  }

  deleteItem(id: number) {
    this.items = this.items.filter(item => item.id !== id);
  }
}

---

Step 4: Update item.component.ts

This component handles user interactions.

import { Component } from '@angular/core';
import { ItemService } from '../item.service';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css']
})
export class ItemComponent {
  items = this.itemService.getItems();
  newItem: string = '';
  editId: number | null = null;
  editName: string = '';

  constructor(private itemService: ItemService) {}

  addItem() {
    if (this.newItem.trim()) {
      this.itemService.addItem(this.newItem);
      this.newItem = '';
    }
  }

  editItem(item: { id: number, name: string }) {
    this.editId = item.id;
    this.editName = item.name;
  }

  updateItem() {
    if (this.editId !== null && this.editName.trim()) {
      this.itemService.updateItem(this.editId, this.editName);
      this.editId = null;
      this.editName = '';
    }
  }

  deleteItem(id: number) {
    this.itemService.deleteItem(id);
  }
}

---

Step 5: Update item.component.html

This template provides UI for CRUD operations.

<div>
  <h2>Angular CRUD App</h2>

  <!-- Add Item -->
  <input [(ngModel)]="newItem" placeholder="Enter item name">
  <button (click)="addItem()">Add</button>

  <!-- Edit Item -->
  <div *ngIf="editId !== null">
    <input [(ngModel)]="editName">
    <button (click)="updateItem()">Update</button>
  </div>

  <!-- Item List -->
  <ul>
    <li *ngFor="let item of items">
      {{ item.name }}
      <button (click)="editItem(item)">Edit</button>
      <button (click)="deleteItem(item.id)">Delete</button>
    </li>
  </ul>
</div>

---

Step 6: Update app.module.ts

Import FormsModule to enable two-way binding (ngModel).

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ItemComponent } from './item/item.component';

@NgModule({
  declarations: [
    AppComponent,
    ItemComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

Step 7: Add <app-item> in app.component.html

html
<app-item></app-item>

---

Run the App

ng serve

Visit: http://localhost:4200

🚀 Your Angular CRUD App is Ready! 🚀

Would you like me to integrate a backend with Node.js & Express? 😃