Delete button from list not working

@jasminewong wrote:

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

}

Posts: 1

Participants: 1

Read full topic