To Do List in Angular | Angular tutorial

#angular #jsonserver #crud #todolist
Hello everyone,
I have created this video for the basic understanding of angular. In this video, I have created a To Do List application. In this video, you will angular concepts like creating components using CLI, form handling, HTTP service calls. Also, I have used JSON-server to store, edit & retrieve data.
Source code : github.com/cod...
Other Projects :
Employee Management System : • Employee Management Sy...
URL Shortner : • URL shortener | URL s...
Multi User Auth system : • Multi User Login System
Social media Handle :
Instagram : / _codelogic_
Thank you.

[@anthonyrodriguez2570]

JSON-Server needed to be installed with npm install -g json-server

[@vijaysekharvn]

simple and sweet example thank you for your time

[@omgodase5770]

thanks man had to show something in angular in urgent and this short and simple also the code works just fine

[@mahakagrawal107]

Thanks for step by step guide for the project

[@SameerAbbasMughal]

Best Video for beginner ❤❤❤❤

[@ginoqie2bg14]

super video very helpfull thank you

[@far-xz8yt]

I am having an error in the web browser as an pop up which shows, " localhost:4200 says 'Unable to get list of tasks' " and in the web browser what we can see is only the To Do List heading in the yellow background, the input field with the "+" symbol and below that the heading "Tasks". That's all. Please help

[@anilsrirangam]

any solution?

[@adarshdhital007]

Now , how can I publish this site. I published it using vercel, but the db.json is not working for it.?

[@venkatsomanath9608]

db.json file is not getting created

[@SagarShirke09]

Check it has reference in todo component.ts file

[@amoldongarwar1989]

how you remember every class and bootstrap style??

[@coading3624]

json-server : The term 'json-server' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 What to do ??

[@CodeLogicByPrajyot]

Need to install json server

[@rahulgoel8572]

npx json-server --watch db.json use this faced same just now and resolved

[@vibhorthakur4835]

First you need to install json server globally unlike in the video where we install it locally by using: npm install -g json-server

[@AHari-uu1tn]

@@vibhorthakur4835 thanks brooooo

[@infouniverse1728]

@@rahulgoel8572 I TRIED BUT DB.JSON COULDN'T BE CATCHED ANYWHERE

[@vimalpratap766]

Very helpful 👍 thanks

[@Asus-f5t]

delete is now working showing invalid ID

[@shivamd27]

Good . But it is not for beginners. He explained it very shortly and assumed that all concepts are clear. But if you know angular then it's nice . You can refer

[@indhugomindhugom1626]

What are the software or programming language used here

[@SagarShirke09]

Angular

[@collegeduniaeducation3015]

Sir Object Add Nahi Ho Raha Hai Todo List May

[@phongtranquoc7557]

why the modal button not working, pls help

[@isurubandara4188]

Thanks a lot!!!! 🤩🤩

[@sheikmahbs424]

Hi , when we are adding ng model to get task_name unable to get error is get url-link 404 (not found) ? why is this so... its not getting add in list

[@CodeLogicByPrajyot]

May be url is not defined

[@sheikmahbs424]

@@CodeLogicByPrajyot same fake json has been added

[@zombieelghoufairi3271]

thank you my brother

[@neeshaneesha4889]

My visual studio code is not updating in browser, can anyone tell y , even after completing everything it still shows as “dashboard works ”

[@giridharpatro5239]

When i try to add item error getting display any reason please tell me i have wrote same code

[@anandk3807]

can we get the data entered in our WEB Application..

[@vishnupriyakolluri9644]

I am getting error in observable

[@mamidiusha6873]

I am also getting error on Observable

[@pratikyesankar3668]

Good video. I took your code from github and run it in vs code but not taking input , can you tell why?

[@neesha_295]

same problem

[@rupallonare7649]

mera bhi work nhi krra

[@nosnayp9897]

👍👍👍👍👍

[@apporvjaiswal9678]

How will you run this application after cloning it from your github?

[@rohit6987]

npm install - install all packages, ng run - run the application, you can run the app

[@srinidhir4945]

The best

[@andreray1795]

great

[@jessicabethayolanda5898]

why in dashboard.component.ts the write subscribe becomes crossed out. Error appeared : Observable.d.ts(52, 9): The declaration was marked as deprecated here.

[@RolynKiunisala-jm7ll]

Same here can't resolve it

[@oreoluwaakinsete764]

same here too, as anyone gotten the solution to the subscribe crossed out

[@oreoluwaakinsete764]

i got the solution to the subscribe but on my angular localhost4200 my tasks are not adding to the todo list- here is the solution- getAllTask() { this.crudService.getAllTask(this.taskObj).subscribe({ next: (res) => this.taskArr = res, error: err => { alert("unable to get list of tasks") } },) } addTask() { this.taskObj.task_name = this.addTaskValue; this.crudService.addTask(this.taskObj).subscribe({ next: res => { this.ngOnInit(); this.addTaskValue = ''; }, error: (err) => { alert(err); } } ) } if i find more solutions i will share

[@GamingDudeKJFM79]

Error is coming ,..like only arrays and iterables are allowed

[@CodeLogicByPrajyot]

Might be some code writing errors .

[@surajbadole7949]

Unable to get list of tasks error aa rha hai bro

[@far-xz8yt]

bro did you solve the problem. I am also having the same issue

[@RAHULSINGH-ct4hn]

it also add blank data when i click add task btn

[@CodeLogicByPrajyot]

You can handle that condition if data is empty you can raise an alert

[@panchalritul8515]

Bro I can't find db.json file missing

[@samabhishek3956]

same problem did u solve it

[@arunvishwakarma2779]

Simply create db.json file with empty braces({ }), this should do

[@laimayumdayal1047]

Getting alert unable to get list of task

[@CodeLogicByPrajyot]

Something must have gone wrong

[@vibhorthakur4835]

when you enter "json-server --watch db.json" dont delete this terminal then enter "ng serve" in new terminal This solved my problem.

[@AndrewsTutorialMix]

@@vibhorthakur4835 Thanks a lot...It works😊

[@surajbadole7949]

@@vibhorthakur4835 bro kaise kiya plz help me

[@far-xz8yt]

did you solve the issue?

[@manibharathi7286]

is Delete works anybody?

[@violetchuene762]

It is not working

[@xaglex1392]

bhai smjha to sahi yr

[@SURYA.R-w6m]

Observable error

[@shubhamtambade2232]

project is run now ?

[@chandrashekarkonathala2951]

Showing some error while typing Observable , it is not even taking that function, Can you help me in that? import { Injectable } from '@angular/core'; import { HttpClient, HttpClientModule } from '@angular/common/http'; import { Task } from '../model/task'; @Injectable({ providedIn: 'root' }) export class CrudService { serviceURL : string ; constructor(private http: HttpClient) { this.serviceURL = "localhost:3000/tasks" } addTask(task : Task) : Observable }

[@CodeLogicByPrajyot]

I think you have not imported observable

[@chandrashekarkonathala2951]

One more error while Expected 1 arguments, but got 0.ngtsc(2554) dashboard.component.ts(11, 5): Error occurs in the template of component DashboardComponent. update The editTask not recognizing!

[@raviparmar6900]

When i am try to update task , i got error , when i check in console they said put localhost:3000/task/0 404 (not found)

[@CodeLogicByPrajyot]

May be method declaration is wrong. Check once again, if url type is correct i.e. put not post

[@raviparmar6900]

@@CodeLogicByPrajyot can i deploy this site on heroku?

[@marvinchang2968]

inside call(etask:Task) function, etask should be given to this.taskObj. Maybe you can check it again?