Ionic 7 CRUD Sample Mobile App

Step 1: Install Dependencies

npm install -g @ionic/cli

Step 2: Create a New Ionic App

ionic start crud-example blank --type=angular

ionic will ask to create a free account you can press N for No

after Creating a new ionic Project Change to the app directory by running:

cd crud-example

Step 4: Generate a New Page

ionic generate page items

This command creates a new page in the src/app/pages directory.

Step 5: Define the Page Layout and Components

Open src/app/pages/items/items.page.html and add the following code:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Items
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of items">
      {{ item.name }}
    </ion-item>
  </ion-list>
</ion-content>

Step 6: Create a Service for Data Management

Open src/app/services/item.service.ts and replace the generated code with the following:

ng generate service services/item

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

@Injectable({
  providedIn: 'root'
})
export class ItemService {
  private items: any[] = [];

  constructor() { }

  getItems(): any[] {
    return this.items;
  }

  addItem(item: any): void {
    this.items.push(item);
  }

  removeItem(item: any): void {
    const index = this.items.indexOf(item);
    if (index > -1) {
      this.items.splice(index, 1);
    }
  }
}

Step 7: Update the Page Component

Open src/app/pages/items/items.page.ts and replace the generated code with the following:

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

@Component({
  selector: 'app-items',
  templateUrl: './items.page.html',
  styleUrls: ['./items.page.scss'],
})
export class ItemsPage {
  items!: any[];

  constructor(private itemService: ItemService) { }

  ionViewDidEnter() {
    this.items = this.itemService.getItems();
  }
}

Step 8: Update the App Module

go to app module dot ts and add ItemService to your providers :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ItemService } from './services/item.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },ItemService  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 9: Update the App Routing Module

Open src/app/app-routing.module.ts and update the routes as follows:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'items',
    pathMatch: 'full'
  },
  {
    path: 'items',
    loadChildren: () => import('src/app/items/items.module').then(m => m.ItemsPageModule)
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Update the Page Template

<ion-header>
  <ion-toolbar>
    <ion-title>
      Items
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item>
    <ion-input placeholder="Item name" [(ngModel)]="newItemName"></ion-input>
    <ion-button slot="end" (click)="addItem()">Add Item</ion-button>
  </ion-item>

  <ion-list>
    <ion-item *ngFor="let item of items" (click)="navigateToItemDetail(item)">
      <ion-input [(ngModel)]="item.name" [readonly]="!item.isEditing"></ion-input>
      <ion-buttons slot="end">
        <ion-button *ngIf="!item.isEditing" (click)="editItem(item)">Edit</ion-button>
        <ion-button *ngIf="item.isEditing" (click)="saveItem(item)">Save</ion-button>
      </ion-buttons>
      <ion-icon name="trash" slot="end" (click)="removeItem(item)"></ion-icon>
    </ion-item>
  </ion-list>
</ion-content>

Open src/app/pages/items/items.page.ts and update the code as follows:

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';
import { ItemService } from 'src/app/services/item.service';

@Component({
  selector: 'app-items',
  templateUrl: './items.page.html',
  styleUrls: ['./items.page.scss'],
})
export class ItemsPage {
  items!: any[];
  newItemName: string;

  constructor(private itemService: ItemService, private navCtrl: NavController) {
    this.newItemName = '';
  }

  ionViewDidEnter() {
    this.items = this.itemService.getItems();
  }

  addItem() {
    if (this.newItemName.trim() !== '') {
      const newItem = { name: this.newItemName };
      this.itemService.addItem(newItem);
      this.newItemName = '';
    }
  }

  removeItem(item: any) {
    this.itemService.removeItem(item);
  }

  editItem(item: any) {
    item.isEditing = true;
  }

  saveItem(item: any) {
    item.isEditing = false;
  }

  navigateToItemDetail(item: any) {

  }
}

test the App

ionic serve

final result :