IONIC - 3.6 Creation of a to do list (2)

Click here for more videos available on our youtube channel !

Following the creation of our buttons, we will go to our “home.page.ts” page, where we are going to create a component which will be called “isOpen” of boolean type, which will be equal to false which we are going to use to energize our buttons. So we are going to insert a “click” attribute that interacts when you click on the button and the same for the second. Here I put the method "(click)="isOpen = false". I do the same thing I copy and I paste for the second button, here, and conversely I'm going to put "true", so here's the result. Now, in our ion-content, line 13, we will create a div that will carry the class “empty”, and we will add text in small indicating “You have no tasks”. And so, in our “.TS” page, we will create a second component, which will be called “task any”. In our HTML page, in our line 17 of ion-list, we will insert the method “*ngIf=”tasks.length” to browse the array. Also, in our footer line 30, our “isOpen” component. So here it is, the result, however we see an error, indeed the methods have been reversed between the 2 buttons, don't panic, we come back to the HTML page, and we reverse the true and the false, like that. And now, when I click on “Add” we can enter a task and cancel it when I click on “Cancel”. Now on our ion-input, line 32, where we will insert an “ngon vModel=newTask”, like this, so that you can automatically enter the desired task dynamically. So we take the “click” method and we will create an “addNewTask()” function and we will also create it in our “.TS” page. So "addNewTask()" we do not forget the parentheses and inside we will create a variable task, here it is like this. And inside we will create the component which will be called “isChecked: false;” so by default and also content: "this.newTask", which will retrieve the value in the field, so "this.newTask" later we will do a task console.log to see what happens. So we're going to look at our page and we're going to inspect in the console, so we're going to click on "add" we will do a new task, for example “do the dishes”, we will add by clicking on the button, and we can see that it has been taken into account by our create component. So back to our HTML page, line 21 concerning “ion-card”, we will do a “ngFor=”let task of tasks” and at “h4” we put the content of our task entered in the control for dynamic entry. So we come back to our page “.TS” we will replace our console.log with “this.newTask =;” and we're going to push it to add our task in the task board. So "this.tasks.push(task)" We go back to the HTML page, we go back to my line 32 because indeed I entered the code incorrectly, remember check the insertion of your brackets or parentheses. it is very important to reread each other to avoid any loss of time. So we try to insert the task in the right place, so the modification has been made and we will be able to look at our page. So the task has been listed, it's perfect and we can add our perfect "cooking". And that's it for our project video, I'll see you right away for a next video, see you soon.