{"id":1856,"date":"2019-07-30T14:33:01","date_gmt":"2019-07-30T09:03:01","guid":{"rendered":"http:\/\/blog.openwebsolutions.in\/?p=1856"},"modified":"2019-07-30T14:33:01","modified_gmt":"2019-07-30T09:03:01","slug":"create-todo-list-angular-7","status":"publish","type":"post","link":"https:\/\/openwebsolutions.in\/blog\/create-todo-list-angular-7\/","title":{"rendered":"How to Create Todo List in Angular 7?"},"content":{"rendered":"<p>As we all know todo list is a list of some urgent important works which we note down and place that somewhere close to our vision so that it will remind us to do that job in particular time or day. Nowadays, our life is becoming more and more digital. So here is a small example of the todo list with the help of angular7.<\/p>\n<p>&nbsp;<\/p>\n<h3>Application overview:<\/h3>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>With the help of todo list, one can add the task by typing and clicking on the add button.<\/strong><\/li>\n<li><strong> One can also drag the task and manage the tasks as per their priority list.<\/strong><\/li>\n<li><strong>After completion of a particular task, one can also remove the task by checking the checkbox and clicking on the delete button.<\/strong><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>Frontend View:<\/h3>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1857\" src=\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2019\/07\/Screenshot-from-2019-07-24-18-05-15-300x214.png\" alt=\"\" width=\"341\" height=\"244\" srcset=\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/07\/Screenshot-from-2019-07-24-18-05-15-300x214.png 300w, https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/07\/Screenshot-from-2019-07-24-18-05-15-768x549.png 768w, https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/07\/Screenshot-from-2019-07-24-18-05-15-600x429.png 600w, https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/07\/Screenshot-from-2019-07-24-18-05-15.png 848w\" sizes=\"(max-width: 341px) 100vw, 341px\" \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0<img loading=\"lazy\" class=\"alignnone wp-image-1858\" src=\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2019\/07\/Screenshot-from-2019-07-24-18-05-38-300x226.png\" alt=\"\" width=\"325\" height=\"244\" srcset=\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/07\/Screenshot-from-2019-07-24-18-05-38-300x226.png 300w, https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/07\/Screenshot-from-2019-07-24-18-05-38-600x451.png 600w, https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/07\/Screenshot-from-2019-07-24-18-05-38.png 703w\" sizes=\"(max-width: 325px) 100vw, 325px\" \/><\/p>\n<h3>We Have Used:<\/h3>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>Bootstrap<\/strong><\/li>\n<li><strong>Material design<\/strong><\/li>\n<li><strong>Dragdrop plugin<\/strong><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>Code:<\/h3>\n<p>&nbsp;<\/p>\n<h4>To get the code go to GitHub &#8220;<a href=\"https:\/\/github.com\/aheli94\/Todo-List\">https:\/\/github.com\/aheli94\/Todo-List<\/a>&#8220;<\/h4>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As we all know todo list is a list of some urgent important works which we note down and place that somewhere close to our vision so that it will remind us to do that job in particular time or day. Nowadays, our life is becoming more and more digital. So here is a small [&hellip;]<\/p>\n","protected":false},"author":30,"featured_media":1859,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,5],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v14.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create Todo List in Angular 7?<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/openwebsolutions.in\/blog\/create-todo-list-angular-7\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Todo List in Angular 7?\" \/>\n<meta property=\"og:description\" content=\"As we all know todo list is a list of some urgent important works which we note down and place that somewhere close to our vision so that it will remind us to do that job in particular time or day. Nowadays, our life is becoming more and more digital. So here is a small [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/openwebsolutions.in\/blog\/create-todo-list-angular-7\/\" \/>\n<meta property=\"og:site_name\" content=\"Openweb Solutions Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-30T09:03:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/07\/Screenshot-from-2019-07-24-18-03-41.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1611\" \/>\n\t<meta property=\"og:image:height\" content=\"808\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/\",\"name\":\"Openweb Solutions Blog\",\"description\":\"Transforming ideas into reality\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/openwebsolutions.in\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/create-todo-list-angular-7\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/07\/Screenshot-from-2019-07-24-18-03-41.png\",\"width\":1611,\"height\":808},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/create-todo-list-angular-7\/#webpage\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/create-todo-list-angular-7\/\",\"name\":\"How to Create Todo List in Angular 7?\",\"isPartOf\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/create-todo-list-angular-7\/#primaryimage\"},\"datePublished\":\"2019-07-30T09:03:01+00:00\",\"dateModified\":\"2019-07-30T09:03:01+00:00\",\"author\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/a0964abd0123c3921478c855abf08c11\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/openwebsolutions.in\/blog\/create-todo-list-angular-7\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/a0964abd0123c3921478c855abf08c11\",\"name\":\"Aheli Bharadwaj\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fa8d1449e4d157d4013e9b67ce92f60f?s=96&r=g\",\"caption\":\"Aheli Bharadwaj\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1856"}],"collection":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/comments?post=1856"}],"version-history":[{"count":14,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1856\/revisions"}],"predecessor-version":[{"id":1881,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1856\/revisions\/1881"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media\/1859"}],"wp:attachment":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media?parent=1856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/categories?post=1856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/tags?post=1856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}