{"id":557,"date":"2023-05-14T10:31:07","date_gmt":"2023-05-14T10:31:07","guid":{"rendered":"https:\/\/sitegator.in\/?p=557"},"modified":"2023-12-26T06:57:37","modified_gmt":"2023-12-26T06:57:37","slug":"to-do-application-in-angular","status":"publish","type":"post","link":"https:\/\/sitegator.in\/cms\/to-do-application-in-angular\/","title":{"rendered":"To do application in angular."},"content":{"rendered":"\n
\"\"
To do list<\/figcaption><\/figure>\n\n\n\n

Steps<\/h1>\n\n\n\n

Step 1 create an angular project without or with routing. Using #command.<\/h1>\n\n\n\n

ng new toDoApp<\/p>\n\n\n\n

Step 2 install the json server using below command<\/h1>\n\n\n\n

npm install -g json-server<\/p>\n\n\n\n

Step 3 create dashboard component, crud services and task class<\/h1>\n\n\n\n

using command 1) ng g c dashboard
2) ng g s crud
3) ng g class task<\/p>\n\n\n\n

Step 4 copy and paste the code as given above folder structure<\/h1>\n\n\n\n

start the json server<\/h1>\n\n\n\n

json-server -watch db.json
it will run on port 3000 and create and db.json file.<\/p>\n\n\n\n

Step 5 run both the json server and our angular to do application on browser.<\/h1>\n\n\n\n

dashboard.component.html<\/h2>\n\n\n\n
<div class=\"container-fluid bg-light\">\n  <div class=\"container bg-light\">\n\n    <div class=\"row mt-4\" style=\"height: 500px;\">\n      <div class=\"col\"><\/div>\n      <div class=\"col-md-6 bg-white shadow\" style=\"border-radius: 10px;\">\n\n        <div class=\"card mt-4\" style=\" background: rgb(2,0,36);\n              background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);\">\n          <h4 class=\"text-white p-3 pt-2 pb-2\">To Do Application<\/h4>\n        <\/div>\n\n        <div class=\"shadow\">\n          <div class=\"input-group p-4\">\n            <input type=\"text\" class=\"form-control\" placeholder=\"Enter task \" name=\"task\" [(ngModel)]=\"addTaskValue\">\n            <button class=\"btn\" type=\"button\" (click)=\"addTask()\"><img src=\".\/assets\/img\/add.png\"\n                style=\"width: 25px;height: auto;\"><\/button>\n          <\/div>\n        <\/div>\n        <div\n          style=\"background: rgb(2,0,36);\nbackground: linear-gradient(203deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); border-radius: 8px;margin: 16px;\">\n          <h4 class=\"mt-4 text-white\" style=\"padding: 6px; text-align: center;\" *ngIf=\"taskArr.length>0\">TASKS <\/h4>\n        <\/div>\n\n        <div style=\"overflow-y: auto; height: 350px; \">\n          <div class=\"m-3\" *ngFor=\"let task of taskArr\">\n            <div class=\"p-2 shadow border\" id=\"tasks\"\n              style=\"background: rgb(2,0,36);\n            background: linear-gradient(203deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);border-radius: 15px;\">\n              <div class=\"row input-group row ps-3\">\n                <div class=\"card col-9 border-0\"> {{task.task_name}} <\/div>\n                <div class=\"col-1\">\n                  <button class=\"btn me-2\" data-bs-toggle=\"modal\" type=\"button\" style=\"margin-left: -21px;\"\n                    data-bs-target=\"#exampleModal\" (click)=\"call(task)\">\n                    <img src=\".\/assets\/img\/edit.png\" style=\"width: 25px;height: auto;\">\n                  <\/button>\n                <\/div>\n                <div class=\"btn col-2\" (click)=\"deleteTask(task)\">\n                  <img src=\".\/assets\/img\/delete.png\" style=\"width: 25px;height: auto;\">\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div *ngIf=\"taskArr.length<=0\" style=\"text-align: center;\">\n            <img src=\".\/assets\/img\/empty.png\" >\n            <p>Empty<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\">\n          <div class=\"modal-dialog\">\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h5 class=\"modal-title\" id=\"exampleModalLabel\">Edit Task<\/h5>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n              <\/div>\n              <div class=\"modal-body\">\n                <div class=\"input-group p-3\"\n                  style=\"background: rgb(2,0,36);\n                background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);border-radius: 25px;\">\n                  <input type=\"text\" class=\"form-control\" placeholder=\"Enter task \" name=\"task\"\n                    [(ngModel)]=\"editTaskValue\">\n                  <button class=\"btn\" type=\"button\" data-bs-dismiss=\"modal\" (click)=\"editTask()\"><img\n                      src=\".\/assets\/img\/update.png\" style=\"width: 25px;height: auto;\"><\/button>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n      <div class=\"col\"><\/div>\n\n    <\/div>\n\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
dashboard.component.ts<\/h2>\n\n\n\n
import { Component, OnInit } from '@angular\/core';\nimport { CrudService } from '..\/service\/crud.service';\nimport { Task } from '..\/model\/task';\n\n@Component({\n  selector: 'app-dashboard',\n  templateUrl: '.\/dashboard.component.html',\n  styleUrls: ['.\/dashboard.component.css']\n})\nexport class DashboardComponent implements OnInit {\n  taskObj : Task = new Task();\n  taskArr : Task[] = [];\n\n  addTaskValue : string = '';\n  editTaskValue : string = '';\n\n  constructor(private crudService : CrudService) { }\n\n  ngOnInit(): void {\n    this.editTaskValue = '';\n    this.addTaskValue = '';\n    this.taskObj = new Task();\n    this.taskArr = [];\n    this.getAllTask();\n  }\n  getAllTask() {\n    this.crudService.getAllTask().subscribe(res => {\n      this.taskArr = res;\n    }, err => {\n      alert(\"Unable to get list of tasks\");\n    });\n  }\n\n  addTask() {\n    this.taskObj.task_name = this.addTaskValue;\n    this.crudService.addTask(this.taskObj).subscribe(res => {\n      this.ngOnInit();\n      this.addTaskValue = '';\n    }, err => {\n      alert(err);\n    })\n  }\n\n  editTask() {\n    this.taskObj.task_name = this.editTaskValue;\n    this.crudService.editTask(this.taskObj).subscribe(res => {\n      this.ngOnInit();\n    }, err=> {\n      alert(\"Failed to update task\");\n    })\n  }\n\n  deleteTask(etask : Task) {\n    this.crudService.deleteTask(etask).subscribe(res => {\n      this.ngOnInit();\n    }, err=> {\n      alert(\"Failed to delete task\");\n    });\n  }\n\n  call(etask : Task) {\n    this.taskObj = etask;\n    this.editTaskValue = etask.task_name;\n  }\n}<\/code><\/pre>\n\n\n\n
crud.service.ts<\/h2>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http'\nimport { Task } from '..\/model\/task';\nimport { Observable } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class CrudService {\n  serviceUrl:string=\"\"\n\n  constructor(private http : HttpClient) {\n    this.serviceUrl = \"http:\/\/localhost:3000\/tasks\"\n  }\n\n  addTask(task : Task) : Observable<Task> {\n    return this.http.post<Task>(this.serviceUrl,task);\n  }\n\n  getAllTask() : Observable<Task[]> {\n    return this.http.get<Task[]>(this.serviceUrl);\n  }\n\n  deleteTask(task : Task) : Observable<Task> {\n    return this.http.delete<Task>(this.serviceUrl+'\/'+task.id);\n  }\n\n  editTask(task : Task) : Observable<Task> {\n    return this.http.put<Task>(this.serviceUrl+'\/'+task.id,task);\n  }\n\n}<\/code><\/pre>\n\n\n\n
Find source code on git hub <\/p>\n\n\n\n
https:\/\/github.com\/pratik-maurya\/To-do-application<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Steps Step 1 create an angular project without or with routing. Using #command. ng new toDoApp Step 2 install the json server using below command npm install -g json-server Step 3 create dashboard component, crud services and task class using command 1) ng g c dashboard2) ng g s crud3) ng g class task Step […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[11,8,9,7,12,10,6],"class_list":["post-557","post","type-post","status-publish","format-standard","hentry","category-angular","tag-angular","tag-to-do-app","tag-to-do-application","tag-to-do-list","tag-todoangular","tag-todoappinangular","tag-todolist"],"_links":{"self":[{"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/posts\/557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/comments?post=557"}],"version-history":[{"count":4,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/posts\/557\/revisions"}],"predecessor-version":[{"id":569,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/posts\/557\/revisions\/569"}],"wp:attachment":[{"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/media?parent=557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/categories?post=557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/tags?post=557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}