In the first two parts of this series, we set the stage for an Ionic 2 Todo app that can be hosted on Heroku. We set up the Node.js backend for the app, with an Express server that defined API endpoints for accessing a MongoDB database. We also laid the groundwork for an Ionic 2 app to the point where the Todos in our database were displaying on the screen. If you\u2019re just joining us now, head back over to Part 1<\/a> and start there.<\/p>\n In this third and final part of the series, we\u2019ll beef up the functionality in our Ionic 2 app, play with more cool Angular 2 stuff, and finish up with a very simple, yet very functional app you can show off to all your friends. In the last post<\/a>, we only implemented the Get method to grab todos from MongoDB. We\u2019ll now finish up the In our In the add function, we use the same endpoint as we did in The In the The final Now, we have access points for our API that we can use in our app components. Let\u2019s jump back up into our For each of the new methods in our Below the This first function will take in a Our second method will receive an actual Our final method will receive a Now, we can use these three methods in our As I pointed out the last time we looked at our Currently, we have:<\/p>\n Let\u2019s fire update the Inside the double quotes, we\u2019ve added Now, let\u2019s do the same thing for our button, should a user want to Next, let\u2019s use our As you may remember, we need to get access to the index of the current todo with which we\u2019re dealing. Within the scope of our Now, we have access to the index of any given Add the following to our Finally, for this section, let\u2019s set the Although I\u2019d previously added them without explanation, we have both the Your Todo App is now almost complete! You can now load, add, update, and delete your todos. The final step we\u2019ll take is to add one more page, where we can view an individual Using the Ionic CLI, we can easily generate our new page:<\/p>\n This just created a folder for us Here\u2019s the updated and now final The changes are: Update your Note: We are also closing our sliding item<\/a> when clicking the In Ionic 2 Beta 9, the Now, you can also open the TodoEdit page by swiping a todo!<\/p>\n Awesomeness; now, we can navigate between our two pages! But before we call it a day, we have to finish our Head into your At this point, most of this should look pretty similar to our We also use the TodoService in a similar fashion to save (update) or delete a todo. In both of those methods, upon receiving our response from our TodoService, we navigate back to our previous page, the Home page, using the In the template for our
\n<\/p>\nInclude Add, Edit, and Delete Functionality<\/h3>\n
TodoService<\/code> with add<\/code>, update<\/code>, and delete<\/code> functions.<\/p>\nloadTodos()<\/code> function, the only parameter we needed to pass to http.get()<\/code> to access our data was the API endpoint: api\/todos<\/code>. In our next three methods, because we are sending some sort of JSON data to our server, we\u2019ll create Headers<\/a> for each HTTP requests.<\/p>\nAdd<\/h3>\n
loadTodos()<\/code>. In addition, we also set the request body with the new Todo\u2019s description<\/code> and POST<\/code> it to api\/todos<\/code>, where an _id<\/code> will be generated and isComplete: false<\/code> will be appended to the Todo<\/code> before saving it to our Todos<\/code> collection.<\/p>\n \/\/ Add a todo-edit\n add(todo: string): Observable<Todo> {\n let body = JSON.stringify({description: todo});\n let headers = new Headers({'Content-Type': 'application\/json'});\n\n return this.http.post(this.todosUrl, body, {headers: headers})\n .map(res => res.json())\n .catch(this.handleError);\n }\n<\/code><\/pre>\nUpdate<\/h3>\n
update<\/code> method (http.put<\/code>) , receives a Todo<\/code> object from our component. The Todo<\/code> is used to append the todo._id<\/code> to the url, telling our API which Todo<\/code> we\u2019re updating. For the body of our request, we JSON.stringify<\/code> the Todo<\/code> before sending it off.<\/p>\n \/\/ Update a todo\n update(todo: Todo) {\n let url = `${this.todosUrl}\/${todo._id}`; \/\/see mdn.io\/templateliterals\n let body = JSON.stringify(todo)\n let headers = new Headers({'Content-Type': 'application\/json'});\n\n return this.http.put(url, body, {headers: headers})\n .map(() => todo) \/\/See mdn.io\/arrowfunctions\n .catch(this.handleError);\n }\n<\/code><\/pre>\nDelete<\/h3>\n
delete<\/code> method, we simply send over headers and specify the todo._id<\/code> in the URL, which our server will use to identify and destroy the Todo<\/code> in question.<\/p>\n \/\/ Delete a todo\n delete(todo: Todo) {\n let url = `${this.todosUrl}\/${todo._id}`;\n let headers = new Headers({'Content-Type': 'application\/json'});\n\n return this.http.delete(url, headers)\n .catch(this.handleError);\n }\n<\/code><\/pre>\ntodo-service.ts<\/code> file should look like this:<\/p>\ntodo-service.ts\nimport {Injectable} from '@angular\/core';\nimport {Http, Headers} from '@angular\/http';\nimport {Observable} from 'rxjs\/Observable';\nimport {Todo} from '..\/..\/todo.ts';\n\n\n@Injectable()\nexport class TodoService {\n todosUrl = "\/api\/todos"\n\n constructor(public http: Http) {}\n\n \/\/ Get all todos\n load(): Observable<Todo[]> {\n return this.http.get(this.todosUrl)\n .map(res => res.json())\n .catch(this.handleError);\n }\n\n \/\/ Add a todo-edit\n add(todo: string): Observable<Todo> {\n let body = JSON.stringify({description: todo});\n let headers = new Headers({'Content-Type': 'application\/json'});\n\n return this.http.post(this.todosUrl, body, {headers: headers})\n .map(res => res.json())\n .catch(this.handleError);\n }\n\n \/\/ Update a todo\n update(todo: Todo) {\n let url = `${this.todosUrl}\/${todo._id}`; \/\/see mdn.io\/templateliterals\n let body = JSON.stringify(todo)\n let headers = new Headers({'Content-Type': 'application\/json'});\n\n return this.http.put(url, body, {headers: headers})\n .map(() => todo) \/\/See mdn.io\/arrowfunctions\n .catch(this.handleError);\n }\n\n \/\/ Delete a todo\n delete(todo: Todo) {\n let url = `${this.todosUrl}\/${todo._id}`;\n let headers = new Headers({'Content-Type': 'application\/json'});\n\n return this.http.delete(url, headers)\n .catch(this.handleError);\n }\n\n handleError(error) {\n console.error(error);\n return Observable.throw(error.json().error || 'Server error');\n }\n}\n<\/code><\/pre>\nHomePage<\/code> component to create methods that will use our service\u2019s new HTTP methods.<\/p>\nHomePage<\/code> Component: Adding, Updating, and Deleting Todos<\/h3>\nTodoService<\/code>, we want to write a method that our HomePage<\/code> Component template can use to add, update, and delete our todos. From this main list view of our todos, we\u2019ll want to create an addTodo<\/code> method for our input form to use, a toggleComplete<\/code> method for our checkbox to use for updating the isComplete<\/code> status of a given Todo<\/code>, and a deleteTodo<\/code> method for our nice red trash can button.<\/p>\nload<\/code> method in our HomePage<\/code> class, let\u2019s add our new methods.<\/p>\nThe
addTodo<\/code> Method<\/h3>\nstring<\/code> value from our input box, and call todoService.add<\/code>. We then subscribe<\/code> to the observable, like we did in the loadTodos<\/code> function, so the request will go out. Inside our subscribe<\/code> statement, we extract the data containing our newly created Todo<\/code> and push<\/code> it onto our todos<\/code> array.<\/p>\n addTodo(todo:string) {\n this.todoService.add(todo)\n .subscribe(data => {\n this.todos.push(data)\n });\n }\n<\/code><\/pre>\nThe
toggleComplete<\/code> Method<\/h3>\nTodo<\/code> object from the view. The first step is to set the isComplete<\/code> property of our Todo<\/code> equal to its opposite (i.e., true<\/code> becomes false or vice versa). Then we ask our TodoService<\/code> to update<\/code> that particular Todo<\/code>. Because we toggled a property of a Todo object already in our HomePage<\/code> component, the view has already been updated.<\/p>\n toggleComplete(todo: Todo) {\n todo.isComplete = !todo.isComplete;\n this.todoService.update(todo)\n .subscribe(data => {\n todo = data;\n })\n }\n<\/code><\/pre>\nThe
deleteTodo<\/code> Method<\/h3>\nTodo<\/code> object, in addition to a second parameter indicating the index of that Todo<\/code> in our class variable, the todos<\/code> array. We\u2019ll figure out how to get the index<\/code> from our HomePage component template in a moment. This method looks like the other two, except that in our subscribe<\/code> function, we have logic to remove the Todo<\/code> from our todos<\/code> array, once we\u2019ve received confirmation that the Todo<\/code> was deleted from the database.<\/p>\n deleteTodo(todo: Todo, index:number) {\n this.todoService.delete(todo)\n .subscribe(response => {\n this.todos.splice(index, 1);\n });\n }\n<\/code><\/pre>\nHomePage<\/code> component\u2019s template file.<\/p>\nEvent Handling in our
HomePage<\/code> Template<\/h3>\nhome.html<\/code> file, there were several spots where we were listening for events but not doing anything with them. Let\u2019s make our app more interactive, starting with our little Add a Todo form in the template file.<\/p>\nAdd a Todo<\/h3>\n
<ion-item no-lines>\n <ion-input #newTodo (keyup.enter)="" type="text" placeholder="Add new todo..."> \n <\/ion-input>\n <button clear large item-right (click)="">\n <ion-icon name="add"> <\/ion-icon>\n <\/button>\n <\/ion-item>\n<\/code><\/pre>\n(keyup.enter)<\/code> event listener, which will fire when a user is in the input box and presses the enter<\/code> or return<\/code> key. We want to add a new todo when a person presses enter, so let\u2019s put our addTodo<\/code> method into that line.<\/p>\n (keyup.enter)="addTodo(newTodo.value); newTodo.value=''"\n<\/code><\/pre>\naddTodo<\/code> and passed in newTodo.value<\/code>. In Angular 2 templates, I\u2019m able to specify template reference variables, such as #newTodo<\/code> on my <ion-input><\/code> element, and work with that element within the template using its reference variable. Thus, we use newTodo<\/code> to get the value<\/code> of our <ion-input><\/code>, and then set its value to an empty string to clear it out with newTodo.value=''<\/code>.<\/p>\nclick<\/code> that, instead of pressing enter<\/code>.<\/p>\n (click)="addTodo(newTodo.value); newTodo.value=''"\n<\/code><\/pre>\nDelete or Update a Todo<\/h3>\n
toggleComplete<\/code> and deleteTodo<\/code>. Our Todo List currently looks like this:<\/p>\n <h2>Todo List <small>Swipe a todo to edit or delete<\/small><\/h2>\n <ion-list no-lines>\n <ion-item-sliding #slidingItem *ngFor="let todo of todos; let index = index">\n <ion-item>\n <ion-checkbox (click)="toggleComplete(todo)" [checked]="todo.isComplete"><\/ion-checkbox>\n <ion-item text-wrap item-left [class.completed]="todo.isComplete">\n {{ todo.description }}\n <\/ion-item>\n <\/ion-item>\n <ion-item-options>\n <button (click)="">Edit<\/button>\n <button danger (click)="deleteTodo(todo, index)">\n <ion-icon name="trash"><\/ion-icon>\n <\/button>\n <\/ion-item-options>\n <\/ion-item-sliding>\n <\/ion-list>\n<\/code><\/pre>\nNgFor<\/code> directive, we have access to its local variable \u2018index\u2019. All we have to do is define it right within the quotes of our *ngFor<\/code>:
\n*ngFor=”let todo of todos; let index = index”<\/p>\nTodo<\/code> in our todos<\/code> array within our repeated <ion-item-sliding><\/code> element. Let\u2019s use it on our beautiful red trash can button:<\/p>\n <button danger (click)="">\n <ion-icon name="trash"><\/ion-icon>\n <\/button>\n<\/code><\/pre>\n(click)<\/code> event:<\/p>\n(click)="deleteTodo(todo, index)"\n<\/code><\/pre>\n(click)<\/code> event on the checkbox to fire our toggleComplete<\/code> method:<\/p>\n<ion-checkbox (click)="toggleComplete(todo)" [checked]="todo.isComplete">\n<\/code><\/pre>\nA Note on Property Binding<\/h3>\n
[checked]<\/code> property of our checkbox and the [class.completed]<\/code> property of our <ion-item><\/code> bound to the isComplete<\/code> property of each Todo<\/code>. When the page loads, if isComplete<\/code> is true, our checkbox will be checked, and our description<\/code> will be styled by the .completed<\/code> class.<\/p>\nTodo<\/code> and edit its description<\/code>, the TodoEdit page.<\/p>\nAdd the TodoEdit Page<\/h3>\n
$ \/todo-ionic2-heroku > ionic g page TodoEdit\n<\/code><\/pre>\napp\/pages\/todo-edit\/<\/code> with HTML, TypeScript, and SCSS files for our new TodoEdit component. To navigate to it from our home<\/code> page to the todo-edit<\/code> page, we\u2019ll need to edit a few things.<\/p>\nhome.ts<\/code> file:<\/p>\n\/\/ home.ts\nimport {Component} from "@angular\/core";\nimport {NavController, ItemSliding, Item} from 'ionic-angular';\nimport {TodoEditPage} from '..\/todo-edit\/todo-edit';\nimport {TodoService} from '..\/..\/providers\/todo-service\/todo-service';\nimport {Todo} from '..\/..\/todo.ts';\n\n@Component({\n templateUrl: 'build\/pages\/home\/home.html',\n providers: [TodoService]\n})\nexport class HomePage {\n public todos: Todo[];\n\n constructor(public todoService: TodoService,\n public nav: NavController) {\n this.loadTodos();\n }\n\n loadTodos() {\n this.todoService.load()\n .subscribe(todoList => {\n this.todos = todoList;\n })\n }\n\n addTodo(todo:string) {\n this.todoService.add(todo)\n .subscribe(newTodo => {\n this.todos.push(newTodo);\n });\n }\n\n toggleComplete(todo: Todo) {\n todo.isComplete = !todo.isComplete;\n this.todoService.update(todo)\n .subscribe(updatedTodo => {\n todo = updatedTodo;\n });\n }\n\n deleteTodo(todo: Todo, index:number) {\n this.todoService.delete(todo)\n .subscribe(res => {\n this.todos.splice(index, 1);\n });\n }\n\n navToEdit(todo: Todo, index: number) {\n this.nav.push(TodoEditPage, {\n todo: todo,\n todos: this.todos,\n index: index\n });\n }\n}\n<\/code><\/pre>\n
\n* Added import<\/code> statements for our TodoEditPage<\/code> and NavController<\/code> from ionic-angular<\/code>
\n* Added NavController<\/code> as a dependency in our constructor
\n* Created a new method navToEdit<\/code>, which uses the NavController<\/code> to push<\/code> on a new page (the TodoEdit<\/code> page). We pass the Todo<\/code> and its index<\/code> from the view, as well as the our todos<\/code> array in the push<\/code> function, as NavParams that we\u2019ll extract in the TodoEdit<\/code> class.<\/p>\nHomePage<\/code> template file (home.html<\/code>), so the edit button will navigate to the TodoEdit<\/code> page and pass along the Todo<\/code>:<\/p>\n<button (click)="navToEdit(todo, index); slidingItem.close()">\n Edit\n<\/button>\n<\/code><\/pre>\nedit<\/code> button<\/p>\nionSwipe<\/code> action was introduced. If desired, we could also open a todos by adding this event to our ion-item-options<\/code> component:<\/p>\n<ion-item-options (ionSwipe)="navToEdit(todo, index); slidingItem.close()">\n <!-- buttons here -->\n<\/ion-item-options>\n<\/code><\/pre>\nAdding functionality to our TodoEdit Page<\/h3>\n
TodoEdit<\/code> component.<\/p>\ntodo-edit.ts<\/code> file and update it with the following code:<\/p>\n\/\/ app\/pages\/todo-edit\/todo-edit.ts\nimport {Component} from "@angular\/core";\nimport {NavController, NavParams} from 'ionic-angular';\nimport {TodoService} from '..\/..\/providers\/todo-service\/todo-service';\nimport {Todo} from '..\/..\/todo.ts';\n\n@Component({\n templateUrl: 'build\/pages\/todo-edit\/todo-edit.html',\n providers: [TodoService]\n})\nexport class TodoEditPage {\n public todo: Todo; \/\/ The todo itself\n public todos: Todo[]; \/\/ The list of todos from the main page\n public index: number; \/\/ The index of the todo we're looking at\n\n constructor(public todoService: TodoService, public nav: NavController, public navParams: NavParams ) {\n this.todo = navParams.get('todo');\n this.todos = navParams.get('todos');\n this.index = navParams.get('index');\n }\n\n saveTodo(updatedDescription: string) {\n this.todo.description = updatedDescription;\n this.todoService.update(this.todo)\n .subscribe(response => {\n this.nav.pop(); \/\/ go back to todo list\n });\n }\n\n deleteTodo() {\n this.todoService.delete(this.todo)\n .subscribe(response => {\n this.todos.splice(this.index, 1); \/\/ remove the todo\n this.nav.pop(); \/\/go back to todo list\n });\n }\n}\n<\/code><\/pre>\nhome.ts<\/code>. The only new features are NavParams<\/code>, which we use to extract the parameters we passed over when we did nav.push<\/code> from our HomePage<\/code> class.<\/p>\nNavController<\/code>\u2019s pop<\/code> method.<\/p>\nUpdating the TodoEdit Template<\/h3>\n
TodoEdit<\/code> page, we\u2019ll use an Ionic TextArea component<\/a> to display and allow for editing of our todo. Then we simply need a Save button to update the Todo, a Cancel button to ABORT MISSION and go back to the Home<\/code> page, and a large, red trash can button, because I\u2019m really awful at writing todo lists and need multiple opportunities to delete them.<\/p>\n