Hi everyone, I’m relatively new to ionic and is now developing a todo list with reference to an article I saw online. However, when trying to implement the delete button, I am not able to delete an item from the list.
Thanks in advance!
Home.Html
<ion-header>
<ion-navbar color="secondary">
<ion-title>
Todo
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="addItem()"><ion-icon name="add-circle"></ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item-sliding (ionSwipe)="delete(item)">
<ion-item *ngFor="let item of items" (click)="viewItem(item)">{{item.title}}
</ion-item>
<ion-item-options>
<button ion-button expandable (click)="removePost(post)">Delete</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
Home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {AddItemPage} from '../add-item/add-item'
import { ModalController } from 'ionic-angular/components/modal/modal-controller';
import { Data } from '../../providers/data/data';
import { ItemDetailPage } from '../item-detail/item-detail';
import {Storage} from '@ionic/storage';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public items = [];
constructor(public navCtrl: NavController, public storage:Storage,public modalCtrl: ModalController) {
}
ionViewDidLoad(){
}
addItem(){
let addModal = this.modalCtrl.create(AddItemPage);
addModal.onDidDismiss((item) => {
if(item){
this.saveItem(item);
}
});
addModal.present();
}
saveItem(item){
this.items.push(item);
}
viewItem(item){
this.navCtrl.push(ItemDetailPage, {
item: item
});
}
removePost(post){
let index = this.items.indexOf(this.items);
if(index > -1){
this.items.splice(index, 1);
}
}
}
Add-item.html
<ion-header>
<ion-toolbar color="secondary">
<ion-title>
Add Item
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="close()"><ion-icon name="close"></ion-icon></button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label floating>Title</ion-label>
<ion-input type="text" [(ngModel)]="title"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Description</ion-label>
<ion-input type="text" [(ngModel)]="description"></ion-input>
</ion-item>
</ion-list>
<button full ion-button color="secondary" (click)="saveItem()">Save</button>
</ion-content>
Additem.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-add-item',
templateUrl: 'add-item.html',
})
export class AddItemPage {
title: string;
description: string;
constructor(public navCtrl: NavController, public navParams: NavParams, public view: ViewController) {
}
saveItem(){
let newItem = {
title: this.title,
description: this.description
};
this.view.dismiss(newItem);
}
close(){
this.view.dismiss();
}
}
Item-detail.html
<ion-header>
<ion-navbar color="secondary">
<ion-title>
{{title}}
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-content>
{{description}}
</ion-card-content>
</ion-card>
</ion-content>
Item-detail.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-item-detail',
templateUrl: 'item-detail.html',
})
export class ItemDetailPage {
title: any;
description: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
this.title = this.navParams.get('item').title;
this.description = this.navParams.get('item').description;
}
}