Notes

step-1:
ionic start to-do
npm i @ionic/storage-angular
ionic g page addNewTask
ionic g service todo
ionic g page update-task
ionic serve

--------------------------
todo-services.servive.ts

////import
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

/////export

constructor(private storage: Storage) {
this.init()
}

add(key:any, value:any)
{
this.storage.set(key, value);
}

delete(key: any)
{
this.storage.remove(key);
}

update(key:any,newvalue:any)
{
this.storage.set(key, newvalue);
this.getall();
}

getall() {
let tasks: any = [];
this.storage.forEach((key, value, index) => {
tasks.push({ key: value, value: key });
});
return tasks;
}

async init() {
await this.storage.create();
}
-------------------------------
-------------------------------
home.page.html


<ion-header [translucent]="true">
<ion-toolbar>
<ion-title> My application </ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">My Application</ion-title>
</ion-toolbar>
</ion-header>

<ion-card *ngFor="let item of todoList;let i=index">
<ion-item>
<ion-avatar slot="start">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcweddPzjVEvZ_yAzMKtfLUPYI24ZoVGP9Vg&usqp=CAU"
/>
</ion-avatar>
<ion-label>
<h3>{{item.value.name}}</h3>
<p>{{item.value.dob}}</p>
</ion-label>
</ion-item>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcweddPzjVEvZ_yAzMKtfLUPYI24ZoVGP9Vg&usqp=CAU"
alt="ion"
/>
<ion-card-header>
<ion-card-title>{{item.value.email}}</ion-card-title>
</ion-card-header>
<ion-card-content> {{item.value.mobile}} </ion-card-content>
<ion-footer>
<ion-row>
<ion-col center text-center>
<ion-button fill="outline">
<ion-icon name="reader-outline"></ion-icon>
<div>Show</div>
</ion-button>
</ion-col>
<ion-col center text-center>
<ion-button color="dark" (click)="update(item)">
<ion-icon name="create-outline"></ion-icon>
<div>Edit</div>
</ion-button>
</ion-col>
<ion-col center text-center>
<ion-button color="danger" (click)="delete(item.key)">
<ion-icon name="trash-outline"></ion-icon>
<div>Delete</div>
</ion-button>
</ion-col>
</ion-row>
</ion-footer>
</ion-card>

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button (click)="addtask()">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>

------------------------------------------
home.page.ts
//import

import { Component } from '@angular/core';
import { AlertController, ModalController } from '@ionic/angular';
import { AddnewtaskPage } from '../addnewtask/addnewtask.page';
import { TodoServicesService } from '../todo-services.service';
import { UpdatetaskPage } from '../updatetask/updatetask.page';

//export in
todoList: any = []
handlerMessage:any

constructor(public modelCtrl: ModalController, public todoservice: TodoServicesService, public alertbox: AlertController) {
this.getalltask();
}


async addtask()
{
const model = await this.modelCtrl.create({
component: AddnewtaskPage
});

model.onDidDismiss().then((newobj) => {
this.getalltask();
});

return await model.present();
}

getalltask(){
this.todoList = this.todoservice.getall();
}

async delete(index:any) {

const alert = await this.alertbox.create({
header: "Alert!",
buttons: [
{
text: 'Cancel',
role: 'Cancel',
handler: () => {
this.handlerMessage = 'Alert Cancel'
}
},
{
text: 'Ok',
role: 'confirm',
handler: () => {
this.todoservice.delete(index);
this.getalltask();
}
}
]

});
await alert.present();
}

async update(selectedtask:any) {
const model = await this.modelCtrl.create({
component: UpdatetaskPage,
componentProps:{task:selectedtask}
});

model.onDidDismiss().then(() => {
this.getalltask();
});

return await model.present();
}
-----------------------------------------------
home.page.css

#container {
text-align: center;

position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}

#container strong {
font-size: 20px;
line-height: 26px;
}

#container p {
font-size: 16px;
line-height: 22px;

color: #8c8c8c;

margin: 0;
}

#container a {
text-decoration: none;
}
-------------------------------------------
-------------------------------------------
addnewtask.html

<ion-content>
<ion-header>
<ion-toolbar>
<ion-title>Add New Item</ion-title>
<ion-icon
name="close"
slot="end"
class="ion-padding"
size="large"
color="danger"
(click)="dismiss()"
></ion-icon>
</ion-toolbar>
</ion-header>

<ion-item lines="full">
<ion-label position="floating">Name</ion-label>
<ion-input type="text" [(ngModel)]="name" required></ion-input>
</ion-item>
<ion-item lines="full">
<ion-label position="floating">Email</ion-label>
<ion-input type="email" [(ngModel)]="email" required></ion-input>
</ion-item>

<ion-item lines="full">
<ion-label position="floating">DOB</ion-label>
<ion-input
position="floating"
id="input-date"
placeholder="Dob"
type="date"
mode="md"
[(ngModel)]="dob"
reuired
>
</ion-input>
</ion-item>
<ion-item lines="full">
<ion-label position="floating">Mobile</ion-label>
<ion-input type="number" [(ngModel)]="mobile" required></ion-input>
</ion-item>

<ion-radio-group lines="full">
<ion-list-header>
<ion-label>Gender</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Male</ion-label>
<ion-radio slot="start" value="male" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>Female</ion-label>
<ion-radio slot="start" value="female"></ion-radio>
</ion-item>
</ion-radio-group>

<ion-list lines="full">
<ion-list-header>
<ion-label>Subjects</ion-label>
</ion-list-header>
<ion-item>
<ion-label>English</ion-label>
<ion-checkbox></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Maths</ion-label>
<ion-checkbox></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Science</ion-label>
<ion-checkbox></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>History</ion-label>
<ion-checkbox></ion-checkbox>
</ion-item>
</ion-list>
<ion-row>
<ion-col>
<ion-button
type="submit"
color="danger"
expand="block"
(click)="AddTask()"
>Submit</ion-button
>
</ion-col>
</ion-row>
</ion-content>
------------------------------------------------------
addnewtask.ts

//import
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { TodoServicesService } from '../todo-services.service';

//export in

TaskObject: any
name: any
email: any
dob: any
mobile:any


constructor( public modelCtrl:ModalController,public todoservice:TodoServicesService) { }

ngOnInit() {
}

async dismiss() {
await this.modelCtrl.dismiss(this.TaskObject);
}

async AddTask() {
this.TaskObject = { name: this.name, email: this.email, dob: this.dob, mobile: this.mobile }
let uid = this.name + this.email + this.dob + this.mobile;
if (uid)
{
await this.todoservice.add(uid, this.TaskObject);
}
else
{
console.log(`can't save empty task`)
}
this.dismiss();
}
-------------------------------------------------
-------------------------------------------------
update.html

<ion-content>
<ion-header>
<ion-toolbar>
<ion-title>Add New Item</ion-title>
<ion-icon
name="close"
slot="end"
class="ion-padding"
size="large"
color="danger"
(click)="dismiss()"
></ion-icon>
</ion-toolbar>
</ion-header>

<ion-item lines="full">
<ion-label position="floating">Name</ion-label>
<ion-input type="text" [(ngModel)]="name" required></ion-input>
</ion-item>
<ion-item lines="full">
<ion-label position="floating">Email</ion-label>
<ion-input type="email" [(ngModel)]="email" required></ion-input>
</ion-item>

<ion-item lines="full">
<ion-label position="floating">DOB</ion-label>
<ion-input
position="floating"
id="input-date"
placeholder="Dob"
type="date"
mode="md"
[(ngModel)]="dob"
reuired
>
</ion-input>
</ion-item>
<ion-item lines="full">
<ion-label position="floating">Mobile</ion-label>
<ion-input type="number" [(ngModel)]="mobile" required></ion-input>
</ion-item>

<ion-radio-group lines="full">
<ion-list-header>
<ion-label>Gender</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Male</ion-label>
<ion-radio slot="start" value="male" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>Female</ion-label>
<ion-radio slot="start" value="female"></ion-radio>
</ion-item>
</ion-radio-group>

<ion-list lines="full">
<ion-list-header>
<ion-label>Subjects</ion-label>
</ion-list-header>
<ion-item>
<ion-label>English</ion-label>
<ion-checkbox></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Maths</ion-label>
<ion-checkbox></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Science</ion-label>
<ion-checkbox></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>History</ion-label>
<ion-checkbox></ion-checkbox>
</ion-item>
</ion-list>
<ion-row>
<ion-col>
<ion-button
type="submit"
color="danger"
expand="block"
(click)="UpdateTask()"
>Submit</ion-button
>
</ion-col>
</ion-row>
</ion-content>
----------------------------------------------------
//import
import { Component, Input, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { TodoServicesService } from '../todo-services.service';

//inexport

@Input() task:any;

name: any
email: any
dob: any
mobile: any
TaskObject = {};


constructor(public modelCtrl:ModalController,public todoservice:TodoServicesService) { }

ngOnInit() {
this.name = this.task.value.name;
this.email = this.task.value.email;
this.dob = this.task.value.dob;
this.mobile = this.task.value.mobile;
}

async dismiss() {
await this.modelCtrl.dismiss();
}

async UpdateTask() {
this.TaskObject = { name: this.name, email: this.email, dob: this.dob, mobile: this.mobile }
let uid = this.task.key;

await this.todoservice.update(uid, this.TaskObject);
this.dismiss();
}