CRUD Application with Local Storage in Angular | Angular CRUD | Angular local storage

Introduction:

As an Angular developer, we are mostly familiar with building dynamic web applications. One of the common requirement any interviewer is implementing CRUD (Create, Read, Update, Delete) operations. In this tutorial, we are mostly creating a simple CRUD Application with Local Storage in Angular and storing data in the browser with local storage. This is a great way to persist data without needing a backend server.


CRUD Application with Local Storage in Angular



We are fallow the all steps at the end of this blog we all have a fully functional CRUD Application with Local Storage in Angular to save and manage data as developer.

Before we start applications, we know that following things must be needed:

-> Basic knowledge of Angular and TypeScript.

-> Node.js and npm installed on your machine.

-> Angular CLI installed (npm install -g @angular/cli).

Step 1: Set Up a New Angular Project

Create a new Angular project:

Open your terminal and run the following command to create a new Angular project:

> ng new angular-crud-localstorage

Choose CSS for styling and No for Angular routing (we won’t need it for this simple project).

Navigate to the project folder:

> cd angular-crud-localstorage

Start the development server:

> ng serve

Open your browser and navigate to http://localhost:4200 to see your app running.



Step 2: Create a Data Model

Generate a new interface:

Create a model to define the structure of the data to store. 

Run the following command to generate a new interface:

> ng generate interface models/item

Define the Item interface:

Open the newly created src/app/models/item.ts file and define the interface:


export interface Item {
  id: number;
  name: string;
  description: string;
}

Step 3: Create a Service to Handle CRUD Operations

Generate a new service:

Run the following command to create a service:


ng generate service services/localstorage

Implement CRUD methods:

Open src/app/services/localstorage.service.ts and add the following code:


import { Injectable } from '@angular/core';
import { Item } from '../models/item';

@Injectable({
  providedIn: 'root',
})
export class LocalstorageService {
  private storageKey = 'crud-app-items';

  constructor() {}

  // Get all items
  getItems(): Item[] {
    const items = localStorage.getItem(this.storageKey);
    return items ? JSON.parse(items) : [];
  }

  // Add a new item
  addItem(item: Item): void {
    const items = this.getItems();
    items.push(item);
    localStorage.setItem(this.storageKey, JSON.stringify(items));
  }

  // Update an item
  updateItem(updatedItem: Item): void {
    const items = this.getItems();
    const index = items.findIndex((item) => item.id === updatedItem.id);
    if (index !== -1) {
      items[index] = updatedItem;
      localStorage.setItem(this.storageKey, JSON.stringify(items));
    }
  }

  // Delete an item
  deleteItem(id: number): void {
    const items = this.getItems().filter((item) => item.id !== id);
    localStorage.setItem(this.storageKey, JSON.stringify(items));
  }

  // Generate a unique ID
  generateId(): number {
    const items = this.getItems();
    return items.length > 0 ? Math.max(...items.map((item) => item.id)) + 1 : 1;
  }
}

Step 4: Create Components for CRUD Operations

Generate components:
Run the following commands to generate components for listing, adding, and editing items:


ng generate component components/item-list
ng generate component components/item-form

Update item-list.component.ts:
Open src/app/components/item-list/item-list.component.ts and add the following code:


import { Component, OnInit } from '@angular/core';
import { LocalstorageService } from '../../services/localstorage.service';
import { Item } from '../../models/item';

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html',
  styleUrls: ['./item-list.component.css'],
})
export class ItemListComponent implements OnInit {
  items: Item[] = [];

  constructor(private localStorageService: LocalstorageService) {}

  ngOnInit(): void {
    this.loadItems();
  }

  loadItems(): void {
    this.items = this.localStorageService.getItems();
  }

  deleteItem(id: number): void {
    this.localStorageService.deleteItem(id);
    this.loadItems();
  }
}

Update item-list.component.html:
Open src/app/components/item-list/item-list.component.html and add the following code:

html

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

Update item-form.component.ts:

Open src/app/components/item-form/item-form.component.ts and add the following code:
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Item } from '../../models/item';
import { LocalstorageService } from '../../services/localstorage.service';

@Component({
  selector: 'app-item-form',
  templateUrl: './item-form.component.html',
  styleUrls: ['./item-form.component.css'],
})
export class ItemFormComponent {
  @Input() item: Item = { id: 0, name: '', description: '' };
  @Output() formSubmit = new EventEmitter<Item>();

  constructor(private localStorageService: LocalstorageService) {}

  onSubmit(): void {
    if (this.item.id === 0) {
      this.item.id = this.localStorageService.generateId();
      this.localStorageService.addItem(this.item);
    } else {
      this.localStorageService.updateItem(this.item);
    }
    this.formSubmit.emit(this.item);
  }
}

Update item-form.component.html:
Open src/app/components/item-form/item-form.component.html and add the following code:


<h2>{{ item.id ? 'Edit Item' : 'Add Item' }}</h2>
<form (ngSubmit)="onSubmit()">
  <label for="name">Name:</label>
  <input type="text" id="name" [(ngModel)]="item.name" name="name" required />

  <label for="description">Description:</label>
  <input type="text" id="description" [(ngModel)]="item.description" name="description" required />

  <button type="submit">{{ item.id ? 'Update' : 'Add' }}</button>
</form>

Run HTML

Step 5: Update the App Component

Update app.component.ts:
Open src/app/app.component.ts and add the following code:


import { Component } from '@angular/core';
import { Item } from './models/item';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  selectedItem: Item = { id: 0, name: '', description: '' };

  onItemSelect(item: Item): void {
    this.selectedItem = { ...item };
  }

  onFormSubmit(): void {
    this.selectedItem = { id: 0, name: '', description: '' };
  }
}

Update app.component.html:
Open src/app/app.component.html and add the following code:


<h1>Angular CRUD with Local Storage</h1>
<app-item-form [item]="selectedItem" (formSubmit)="onFormSubmit()"></app-item-form>
<app-item-list (itemSelect)="onItemSelect($event)"></app-item-list>

Run HTML

Step 6: Test Your Application
Run the application:

> ng serve

Open your browser and navigate to http://localhost:4200. 

--> yes, developer we done it CRUD Application with Local Storage in Angular
    You should be able to:

Add new items.

Edit existing items.

Delete items.

See the changes persist in local storage.


Conclusion

In this article through we can easily built a CRUD Application with Local Storage in Angular . This project demonstrates how to manage data without a backend server, making it a great starting point for small-scale applications.

this is very nice to expand this project by adding features like validation, sorting, or filtering.

Read More :



Keywords: #Angular_CRUD, #Angular_local_storage, #CRUD_operations