Angular PrimeNG TodoList with Json server (Code attached)

Todo List in Angular and Primeng
This video contains
- installation of Primeng, primeicons, primeflex.
- Used card, button, inputtext, checkbox, table components of PrimeNG.
- Added form validation with disable button
- Todo List, Create, Update, Delete
Prerequisites
Node JS Installation
nodejs.org/en
Angular cli
npm install -g @angular/cli
Create angular application
ng new angular-primeng-todo
Github
github.com/has...
#angular #primeng #angularproject #todo #todolist #learnfromscratch #jsonserver

[@naseddinoufallah628]

this is a good toturial, thanks

[@muralimk4643]

Very useful tutorial, helped to understand primeng elements, create, update, delete operations with hands on. Thanks much Haseena for this video🎉👍

[@User.2024.1]

good to see Angular+PrimeNG projects on youtube. everyone keep talking about React these days. What is pre-requisite for this? Typescript? (I know java and python, very little knowledge on JS though). subscribed. thanks.

[@haseena.khader]

Basic understanding of javascript and typescript

[@dominicencho4179]

Thank you for this tutorial. I would like to know how to use PrimeNG components with SSR in Angular. Especially the dropdown component,
Thank you.

[@alexg7282]

Thanks

[@veryKnightley]

Thank you for this tutorial. I am however, running into a problem, even when I directly copy/paste your code.
1) addTodo creates new data in my json database, but generates a string (c7d6) as the ID, instead of a number.
2) updateTodo does not work, unless targeting database entrees created via addTodo.
3) deleteTodo is affected in the same way.
4) When manually changing my ID fields in my database from Numbers to Strings, problems 2 and 3 are resolved.
What might be going wrong here?
How would this script know what the current highest ID number is and add the next following integer to the new todo task?
How do I make sure that the ID generated is a Number?
Aside from all that, I was also wondering:
5) How do I bind the [Enter] key on my keyboard to addTodo?
It just feels nice to fill in a form and smash the enter key to submit the data!
Kind regards;

[@haseena.khader]

Regarding the point you mentioned
1) in the example attatched, ID is taken as a number, Please change in the interface todo.ts and change in the json file if you are planning to use a string
2) updateTodo should work if the id matches
3) deleteTodo should also word if id type and value matches (please add a console for debug)
4) not only in database, change in the interface also
if id is using as number , json-server will handle it. if you a proper backend, backend should be sorted by createdAt date
5) if you want to handle enter key event, try with (keydown.enter) event

[@veryKnightley]

@@haseena.khader i am defining and using ID as a number. UpdateToDo creates a string value. DeleteToDo only works on entrees with ID as a string.
I have directly copied your code from GitHub to check, it still happens that way.

[@hexadecimalhexadecimal5241]

At 4:28 when you show your web page there is no horizontal line but for me and in the docs where you copied the 5 - 6 lines of code there is a horizontal line, why is this?

[@haseena.khader]

You mean while copying the card?

[@hexadecimalhexadecimal5241]

@@haseena.khader Yeah but i figured it out, great videos i have already completed a few! would you consider making a video where you build a basic web portfolio that's also mobile responsive? that would be amazing. Thank you.

[@jesti988]

Which lap good for coding ma'am

[@gamingbeast710]

great thx ; i tried to update to angular 15 from 13 and it needed primeng 13 with it , i was stuck for 2 days with a bug that kept happening in FogrmGroup attributes when i try to set some attributes they become NULL directly ;
Same base code of my app i changed nothing and that bug hapened suddenly which had no explanation at all; did you manage to face something like this please ? what should i do because in same FormGroup some attributes are good with setting their value and some become NULL

[@haseena.khader]

Normally for angular 15 I used to use primeng 15. Try upgrading the primeng with the same version of angular

[@gamingbeast710]

ah yes primeng 15 it is already 15 ; but the problem exist @@haseena.khader

[@codewithsk07]

Is it possible to create a dark theme application in prime NG , If it its possible can you have video on that it will helpful

[@haseena.khader]

Sure. Will do

[@codewithsk07]

@@haseena.khader thanks 😊