{"id":3480,"date":"2017-07-04T11:05:05","date_gmt":"2017-07-04T11:05:05","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=3480"},"modified":"2017-07-04T11:34:11","modified_gmt":"2017-07-04T11:34:11","slug":"create-simplest-todo-application-ionic-3","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/javascript\/ionic3\/create-simplest-todo-application-ionic-3\/","title":{"rendered":"How to create the simplest TODO application with Ionic 3"},"content":{"rendered":"<h2>TL;DR<\/h2>\n<p>This is the simplest example which shows how to create a simple TODO application with Ionic 3 in just a few lines of code.<\/p>\n<h2>Quickstart<\/h2>\n<p>To see it in action:<\/p>\n<ul>\n<li>Clone the finished project <a href=\"https:\/\/github.com\/Hitman666\/Ionic3_SimplestTodoApp\">from Github<\/a><\/li>\n<li>Make sure you\u2019ve got the newest Ionic CLI (see <a href=\"www.nikola-breznjak.com\/blog\/javascript\/ionic3\/posting-data-ionic-3-app-php-server\/\">this post<\/a> for more instructions)<\/li>\n<li>Run <code>ionic serve<\/code><\/li>\n<li>The app in action (<em>after adding few items and swiping to delete one<\/em>):<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/yf78Fnr.png\" alt=\"\" \/><\/p>\n<h2>Step by step on how to create this yourself from scratch<\/h2>\n<p>Create a new blank Ionic project with <code>ionic start Ionic3ServerSendTest blank<\/code><\/p>\n<h3>Template<\/h3>\n<p>Copy the following code to <code>src\/pages\/home\/home.html<\/code> file:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/Hitman666\/09556a02be13c419698bceab357b8ff5.js\"><\/script><\/p>\n<p>Here we have three parts:<\/p>\n<ul>\n<li>an input (<code>ion-input<\/code>) field where we enter the text for our TODO. We&#8217;ve put a ngModel of name <code>todo<\/code> on it &#8211; we will be able to reference this in the code by this same variable name.<\/li>\n<li>a button (<code>ion-button<\/code>) which when clicked calls the function called <code>add<\/code>, which we&#8217;ll define in our <code>src\/pages\/home\/home.ts<\/code> file shown below.<\/li>\n<li>a list (<code>ion-list<\/code>) with multiple items (<code>ion-item<\/code>) in it. Also, we&#8217;ve made use of the <code>ion-item-sliding<\/code> (learn more about it from the docs <a href=\"http:\/\/ionicframework.com\/docs\/components\/#sliding-list\">here<\/a>). We are repeating the <code>ion-item-sliding<\/code> component as many times as we have items in the <code>todos<\/code> array (you&#8217;ll see where we set that in the <code>home.ts<\/code> file, as mentioned above).<\/li>\n<\/ul>\n<h3>Code<\/h3>\n<p>To the <code>src\/pages\/home\/home.ts<\/code> file copy the following content:<\/p>\n<pre><code>import { Component } from '@angular\/core';\nimport { NavController } from 'ionic-angular';\n\n@Component({\n    selector: 'page-home',\n    templateUrl: 'home.html'\n})\nexport class HomePage {\n    todos: string[] = [];\n    todo: string;\n\n    constructor(public navCtrl: NavController) {\n\n    }\n\n    add() {\n        this.todos.push(this.todo);\n        this.todo = \"\";\n    }\n\n    delete(item) {\n        var index = this.todos.indexOf(item, 0);\n        if (index &gt; -1) {\n            this.todos.splice(index, 1);\n        }\n    }\n}\n<\/code><\/pre>\n<p>The only thing that differs here from the basic <code>blank<\/code> template generated code is the <code>todos<\/code> and <code>todo<\/code> variables which we use for holding the array of <em>todos<\/em> and a current <em>todo<\/em> that&#8217;s connected to the model in the input box.<\/p>\n<p>The <code>add<\/code> function pushes the current <code>todo<\/code> that we have in the input box at the time of pressing the <code>Add<\/code> button into the <code>todos<\/code> array.<\/p>\n<p>The <code>delete<\/code> function first finds the index of the item that we want to delete from the list and then, by using the <a href=\"https:\/\/stackoverflow.com\/questions\/15292278\/how-do-i-remove-an-array-item-in-typescript\">splice<\/a> function, it deletes the item from the <code>todos<\/code> array.<\/p>\n<h3>Running the app<\/h3>\n<p>Just run <code>ionic serve<\/code> or even better yet <code>ionic lab<\/code> from the root directory of your Ionic app and you&#8217;ll have the app running locally in your browser tab with live reload option turned on.<\/p>\n<h2>Conclusion<\/h2>\n<p>That&#8217;s it. It doesn&#8217;t get any easier than this. Sure, this is as simple as it gets; there&#8217;s no persistence or anything, that&#8217;s for you to play with. Or, well, I may add that in the next tutorial&#8230;<\/p>\n<p>&#8216;Till then, have a great one, and a happy 4th of July to all my friends across the big pond \ud83d\ude09<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"550\">\n<p lang=\"en\" dir=\"ltr\">How to create the simplest <a href=\"https:\/\/twitter.com\/hashtag\/TODO?src=hash\">#TODO<\/a> application with <a href=\"https:\/\/twitter.com\/hashtag\/Ionic?src=hash\">#Ionic<\/a> 3 <a href=\"https:\/\/t.co\/xvjmXVruBH\">https:\/\/t.co\/xvjmXVruBH<\/a><\/p>\n<p>&mdash; Nikola Bre\u017enjak (@HitmanHR) <a href=\"https:\/\/twitter.com\/HitmanHR\/status\/882195079082987520\">July 4, 2017<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>TL;DR This is the simplest example which shows how to create a simple TODO application with Ionic 3 in just a few lines of code. Quickstart To see&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3481,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56],"tags":[],"class_list":["post-3480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ionic3"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=3480"}],"version-history":[{"count":4,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3480\/revisions"}],"predecessor-version":[{"id":3485,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3480\/revisions\/3485"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/3481"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=3480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=3480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=3480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}