DEV Community

Chabba Saad
Chabba Saad

Posted on

18

Ionic 7 CRUD Sample Mobile App

Step 1: Install Dependencies



npm install -g @ionic/cli



Enter fullscreen mode Exit fullscreen mode

Step 2: Create a New Ionic App



ionic start crud-example blank --type=angular



Enter fullscreen mode Exit fullscreen mode

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

free account

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



cd crud-example



Enter fullscreen mode Exit fullscreen mode

Step 4: Generate a New Page



ionic generate page items



Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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



Enter fullscreen mode Exit fullscreen mode


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);
    }
  }
}


Enter fullscreen mode Exit fullscreen mode

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();
  }
}


Enter fullscreen mode Exit fullscreen mode

Step 8: Update the App Module

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

ItemService



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 {}



Enter fullscreen mode Exit fullscreen mode

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 { }


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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) {

  }
}


Enter fullscreen mode Exit fullscreen mode

test the App



ionic serve



Enter fullscreen mode Exit fullscreen mode

final result :

testcrud

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs