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 :
Top comments (0)