IONIC - 3.7 Creation of a to do list (3)

Click here for more videos available on our youtube channel !

Now that the buttons are in place, we move to home.page.ts and create a boolean property isOpen = false that we will use to drive their behavior. Back in the HTML, we wire each button with a (click) attribute: the first sets isOpen = false and the second sets isOpen = true, so we can toggle the input panel.

Inside <ion-content> at line 13, we add an empty-state block: a div with a class empty and a small text "You have no tasks yet". In the TypeScript file we add a second property, an array tasks: any[] = []. Back in the HTML at line 17, on the <ion-list> we use *ngIf="tasks.length" so the list is only shown when there are tasks, and on the footer at line 30 we use *ngIf="isOpen" so the input area appears only when needed. If the buttons turn out to be reversed, we just swap true and false on them. Clicking Add opens the input, clicking Cancel closes it.

Capturing and inserting the new task

On the <ion-input> at line 32, we add [(ngModel)]="newTask" so the value typed by the user is bound dynamically to a property. The Add button gets a (click)="addNewTask()" attribute, and we create that method on the TypeScript side. Inside it, we build a task object:

addNewTask() {
  const task = {
    isChecked: false,
    content: this.newTask
  };
  this.tasks.push(task);
  this.newTask = '';
}

We can first use console.log(task) to verify that the right object is created. Inspecting the page in the browser, we click Add, type a task such as "do the dishes", click the add button, and we see the object logged correctly.

Back in the HTML, on the <ion-card> at line 21, we add an *ngFor="let task of tasks" directive to iterate over the tasks array, and in the <h4> we display the content of each task. After replacing the console.log by the actual push, the new task is added to the array and rendered immediately. Take care with brackets and parentheses while editing, re-reading your code saves a lot of time. The task is now listed correctly, and we can keep adding more entries such as "cooking". See you in the next video.

Summary

This lesson covers the implementation phase of creating a to-do list application in Ionic 3.7, focusing on dynamic button behavior, task input management, and list rendering. Students learn how to bind click events to toggle the add task form, capture user input through two-way data binding, and push new tasks to an array that displays in the UI. The instructor demonstrates the complete workflow from creating the component logic through validation and testing the functionality.

Key points

• Create an isOpen boolean variable to control task form visibility with click event handlers on buttons
• Use two-way data binding with ngModel to capture task input dynamically from a text field
• Implement an addTask() method that pushes user input to a tasks array and handles form state reset
• Render the task list conditionally using *ngFor to iterate through tasks and display them in cards
• Include empty state messaging ('You have no tasks') when the task list is empty
• Validate proper parenthesis placement and method binding syntax to prevent runtime errors

FAQ

How do you toggle the visibility of the add task form in Ionic?

Create a boolean property called isOpen, set it to false by default, and use click event binding on buttons to toggle its value. Then use *ngIf="isOpen" on the form container to show or hide it conditionally.

What is the purpose of the newTask variable in this to-do list implementation?

The newTask variable stores the text input from the user before it's submitted. It uses two-way data binding with ngModel [(ngModel)]="newTask" to synchronize the input field with the component property, allowing you to reference the task text when the add button is clicked.

How do you add a task to the array and refresh the display?

In the addTask() method, use the push() method to add the newTask object to the tasks array (this.tasks.push(this.newTask)), then reset the form by creating a new empty task object (this.newTask = new Task()) to clear the input field for the next entry.