Ionic 7 CRUD Sample Mobile App
Tags: ionic, angular, tutorial
Published: 2023-05-15 19:56:24

Step 1: Install Dependencies

```javascript
npm install -g @ionic/cli

```

Step 2: Create a New Ionic App

```javascript
ionic start crud-example blank --type=angular

```

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

![free account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ax2u75h37n9npeih34q5.png)



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

```javascript
cd crud-example

```

Step 4: Generate a New Page


```javascript
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:

```javascript
<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:

```javascript
ng generate service services/item

```


```javascript
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:


```javascript
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 : 


![ItemService ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkhuvo3tbf6gmrz9kr68.png)

```
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:

```javascript
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

```javascript
<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:


```javascript
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 

```javascript
ionic serve

```

final result : 


![testcrud](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eo628gte3ulbax0b1bhk.png)