Notes

https://roan-scarecrow-2af.notion.site/upload-73bca2dfa9f24664969bfc1e5ff90e1c

ionic install -g @ionic/cli
ionic g page addnewtask/updatetask
ionic g service todo-service
npm i ionic-angular
npm i @ionic/storage-angular
----------------------------------------
sudo apt update
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt install nodejs
sudo npm install -g cordova
sudo npm i -g @ionic/cli
ionic serve --host 0.0.0.0 --port 8100
----------------------------------------
#Add & Show
==============
1)home.page.ts

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { AddnewtaskPage } from '../addnewtask/addnewtask.page';

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
todoList:any = []
constructor(public modelCtrl: ModalController) { }
async addtask()
{
const model = await this.modelCtrl.create({
component: AddnewtaskPage
});
model.onDidDismiss().then((newobj) => {
this.todoList.push(newobj.data);
});
return await model.present();
}

}

2)addnewstask.page.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>

3)addnewtask.page.ts

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';

@Component({
selector: 'app-addnewtask',
templateUrl: './addnewtask.page.html',
styleUrls: ['./addnewtask.page.scss'],
})
export class AddnewtaskPage implements OnInit {

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


constructor( public modelCtrl:ModalController) { }
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 }
this.dismiss();
}

}

4)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">
<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.name}}</h3>
<p>{{item.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.email}}</ion-card-title>
</ion-card-header>
<ion-card-content> {{item.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">
<ion-icon name="create-outline"></ion-icon>
<div>Edit</div>
</ion-button>
</ion-col>
<ion-col center text-center>
<ion-button color="danger">
<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>

==============
#Delete without popUp
==============
1)home.page.ts

async delete(index:any) {
this.todoList.splice(index, 1);
}

2)home.page.html

<ion-card *ngFor="let item of todoList;let i=index">

<ion-button color="danger" (click)="delete(i)">

==============
#Storage
==============
1)todo-service.service.ts

import { Injectable } from '@angular/core';
import { ValueAccessor } from '@ionic/angular/directives/control-value-accessors/value-accessor';
import { Storage } from '@ionic/storage';

@Injectable({
providedIn: 'root'
})
export class TodoServicesService {

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

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

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

update()
{ }

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

async init() {
await this.storage.create();
}


}

2)home.page.ts

export class HomePage {

todoList: any = []

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


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) {
this.todoservice.delete(index);
this.getalltask();
}

}

3)home.page.html

{{item.value.name}}
<ion-button color="danger" (click)="delete(item.key)">

4)addnewtask.page.ts

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


==============
#Delete with pop up
==============

1)home.page.ts

handlerMessage:any

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


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

}

==============
#Update
==============
1)updatetask.page.html

<ion-button
type="submit"
color="danger"
expand="block"
(click)="UpdateTask()"
>Submit</ion-button
>

2)home.page.ts

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

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

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

return await model.present();
}

3)home.page.html

<ion-icon name="create-outline" (click)="update(item)"></ion-icon>

4)update-task.page.ts

export class UpdatetaskPage implements OnInit {


@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;

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



}

5)todo-services.service.ts

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