Updating and Deleting — Ionic Part 3

In the last post, we implemented the C and R in CRUD for a simple to-do list app. It worked like a charm!

Now, onto the other half of CRUD; Update and Delete.

We will first begin with changing the GUI so that it can fit both the update and delete features. Thereafter move onto the TypeScript code, to show its functionality.

Step 1 — Change that look

Whoops! Little forgetful ole me! I didn’t change the app name on the home page… 😅😅😅

Go ahead and call it whatever you wish (I’ll be basic with ‘To-do List’).

The first step, to be done in the home.html, is to add the delete button to the left side of each list item. That’s easy! Reuse the very same code I used to include the addTask button next to the input in the <ion-item>, nesting this button within the div with the class item-note, but change that + into an 🗑️icon (don’t want to get confused now, do we?). Since this is a button, give the event handler the name deleteTask(). The button will also have another style class clear, which gives it a clear background. Since this button will be within the <ion-item> that is in the <ion-list>, it will be generated for all items in the list.

We need to add another button to the list to edit each task. Luckily more copying of code! Copy the whole button tag, but replace the icon 🗑️ to a ✏️ and the click handler to updateTask().

The code for each <ion-item> tag now looks like this

<ion-item *ngFor="let todo of taskList; let i = index">
{{todo}}
<div class="item-note" item-end>
<button ion-button clear (click)="updateTask(i)">
<ion-icon name="create"></ion-icon>
</button>
<button ion-button clear (click)="deleteTask(i)">
<ion-icon name="trash"></ion-icon>
</button>
</div>
</ion-item>

The statement let i = index takes the index of the specific element in the list, so that we can pass it over to the method, so only the element to be deleted would be affected.

Pretty neat, huh?😎

I quite like it and it looks so much better than the wireframe I originally designed.

Step 2 — Behind the scenes

Now to add functionality to our 🗑️ and ✏️.

We need to create a new method within the home.ts called deleteTask(), as specified in home.html above. We pass the index of the array from within the ngFor loop, so we know the exact position of the task to be deleted. Hop on over to home.html, and pass the parameter i, which is the index of the element in the array, within the deleteTask method, like so deleteTask(i). As you have passed the index through to the home.ts, you simply need to use the splice() method on the array to remove the desired task, passing the index of the item to be removed as a parameter, like so this.taskList.splice(index, 1);.

The code for the deleteTask method is;

deleteTask(index){
this.taskList.splice(index, 1);
}

Short and sweet! 😋 That’s all the coding we need to delete tasks!

Now to update, it will take a bit more typing (bear with me)!

My plan is to open up an alert asking the user to enter the update text of the task. To do that, we need to import the AlertController, a module found in ionic-angular. You import it using this line of code.

import { NavController, AlertController } from 'ionic-angular';

You then need to initialize it in the constructor, like so;

constructor(public navCtrl: NavController, public alertCtrl: AlertController)

You will then need to create an alert in the updateTask method to capture the new task name. To do so, you will need to pass the following into the create method of the AlertController;

  1. title — The title of the message.
  2. message — A longer message (if required).
  3. inputs — Input field with their name and placeholder (if any).
  4. buttons — Buttons along with their role or handler (if any).

The alert can be displayed afterward with the simple alert.present()command. I will be having two buttons, one is a cancel button, the second is to edit and the handler code will simply take the entered task and switch it with the previous value in the array. The code for the updateTask() method;

updateTask(index) {
let alert = this.alertCtrl.create({
title: 'Update Task?',
message: 'Type in your new task to update.',
inputs: [{ name: 'editTask', placeholder: 'Task' }],
buttons: [{ text: 'Cancel', role: 'cancel' },
{ text: 'Update', handler: data => {
this.taskList[index] = data.editTask; }}]
});
alert.present();
}

It should all work perfectly now!

Step 3 — The unveiling

Want to see the final CRUD app?

And there you have it! 🎉🎉

A fully operational CRUD to-do list, with minimal coding! That’s how easy Ionic can be.

I still believe we can make it a bit more user-friendly. Scroll down for more add-on functionality.

Bonus!! — Auto-focus

Input without autofocus

Do you know what I find annoying? I need to click on the input each time I want to add a new task, even at the beginning. Why not auto-focus the input after clicking the button?

That’s exactly what we will do!

Auto-focus on Ionic is not as easy as it is in classic HTML/JavaScript interactions. You need to import an extra component called ViewChild. You can then easily connect the input from the view (home.html) to the controller (home.ts), and manipulate it as well. You import it, like so;

import { Component, ViewChild } from '@angular/core';

You can then connect the input tag to the component, outside the constructor, using this line of code,

@ViewChild('taskInput') input;

taskInput is the id of the input tag on the home.html page. Go ahead and add#taskInput to the input tag. The input tag can now directly be handled from within the TypeScript file.

Ionic comes with a few methods that can be invoked on certain app events, such as when a page loads onto the view, unloads and so on. These are called lifecycle events, and more about then can be found here. We can cause the app to auto-focus on the input from within the ionViewDidLoad(), by setting a timeout. The code would be;

ionViewDidLoad(){
setTimeout(() => {
this.input.setFocus();
},350);
}

For the auto-focus to work after you add the line this.input.setFocus(); as the last statement in the addTask() handler. Lets head on out to see the changes we made!

Input with autofocus

Now that’s what you call seamless…😎

Find the commit for this step, here.

P.S Link to the next post!

Front End Developer at Switchd Ltd. | MSc in Computer Science @ QMUL (2022)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store