Angular CRUD action using NGRX pattern and Material UI design | Angular NGRX examples
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- #angularcrud #angular #nihiratechiees #ngrx
This video implements Angular CRUD action with below concepts
1, Angular 16 CRUD Actions
2, Angular NGRX pattern
3, Angular Material UI Design
4, JSON-SERVER REST API
Steps Followed
==============
1, Create brand new application
ng new application-name
2, Create required files ( components & supporting files)
3, Installation required packages
4, Implement design using Material UI components
5, Implement NGRX flow
Packages need to install
====================
1, ng add @angular/material
2, ng add @ngrx/store@latest
3, ng add @ngrx/effects@latest
4, ng add @ngrx/router-store@latest
5, ng add @ngrx/store-devtools@latest
6, npm install json-server
json-server --watch src/data/db.json
Source Code GitHub Link
====================
github.com/nih...
Join this channel to get access to perks:
/ @nihiratechiees
![[Watch Party] RoV Pro League 2024 Winter | ( Bacon Time Vs PSG )](http://i.ytimg.com/vi/zM25REvnJW4/mqdefault.jpg)
I love you my friend! Thanks for sharing your knowledge.
Thanks 👍
In an ocean of broken Angular projects I stumble upon this treasure!
India is huge country with many of people, dialects and accents. Some are really hard to bear sometimes for long periods of time. But you are so well articulated that I could listen to you explaining things for hours.
This tutorial is great and I would recommend to anyone interested in this technology to follow it from start to finish.
I wish you all the best in programming, teaching and other aspects of your life!
Best regards from Serbia!
P.S. I noticed that you write things in small letters, for example "datasource" instead of "dataSource". It might be a silly question but iWasWonderingBecauseIGotUsedToTypeLikeThisBecauseOfJava. Is this convention wrong to use in TypeScript ?
Thanks for your wonderful words.
There is no conversion issue... Sometimes if you declaring "Name" but you binding as "name". Then it will be problem so I always using small letters.
Just for remembering
Good one bro
Thanks brother👍
Very nice
Thanks
quick question, in App.effect.ts file why you created it you could have created a reducer instead of an effect just to understand meaning instead of an effect file in common why you didn't created a reducer file in it
App.effect I created for handling alert only. It's not change/update our actual state.
Just assume you have two different menu for both we created effect, reducer, state and action. Also if I included alert logic I just duplicating the alert code that's why created common effect file.
For state modifications done through respective reducer
All the newly created associate's id is 0 and it is saved in db.json with id 0 and only the associate listing is showing is because of id+1 implementation in the effect. how to save the id properly? Please guide.
Json server api concept basically it will generate id automatically.. If you feel it's not generated. Pass the id also in the request (effect section)
hello! I hope you are well!! I have enjoyed your videos, your teaching, congratulations!!!
to ask you a question, I have been trying to use this development with the form without opening it via popup but I am not able to do so after editing trying to insert the data it is not clearing it. When you have time, could you record a video with the form without using a popup? Thank you very much in advance.
Thanks. It's possible to achieve with normal form, will cover this in future videos
thx, create a full web app using angular with admin panel
Sure👍
Your code has an issue, while adding the associate you are not making any change in id, you only update id for displaying. It affects the delete functionality. I pulled the code you have in github, and the problem is there in your code too. I wish you gave a solution for that
I am using json server api it will generate id automatically since you not provide any value
While Displaying data , Every time Api Got Called Or m I getting Wrong
That we can customize.... Every time if you calling api it will affect performance
tell me the differnce b/w ngrx entity and ngrx effect
Effect is the place for handling http services. Entity is the concept for code optimization ( if you have common function in different menu then we can create common entity)
For more details follow my angular ngrx playlist
I think I followed every step in that video,
but I don't know why the API call is being triggered multiple times when saving the form.
Could somebody help me? Here is the repository link:
Is a Github link, and the account is TsaiTsaiChieh, repository name is ngrxcrud (TH-cam could not leave the link...)
Will check and update you
@@NihiraTechiees Thank you very much, I have been searching for a long time to debug, but I still don't know the reason...
Maybe it could the same problem. Cancel button triggers update too
Hi Nihira Sir,
I am getting compile time error "Invalid number of arguments, expected 0" on line number 19 ie., "return loadAssociateSuccess({list: data})"
i have followed exact step, i am on angular 17
Please help !!
Did you run json server api?
@@NihiraTechiees yes sir my json server is running. I m on 33:00 till that time i have ran everything successfully. It just that on associate.effect.ts i am getting this issue on line number 19 of method “_loadassociate” and same on line number 21 also
How add vertical screen bar in this table
Check my material UI series
Am getting error at 1:06:58 getassociatesucess({obj:data})
It says type asssociates is missing the following properties ….
In actions.ts the expected type comes from property obj which is declared here on type ‘{obj :Associates } ‘
Can someone help me with this
Have you created interface associates
@@NihiraTechiees yes I did
Look like it's not imported top.
@@NihiraTechiees I did import too
@@NihiraTechiees also at 1:08:54
This.store.dispatch (getassociate{Id : code})
Am greeting error for id : code saying
Argument of type '{ code: number; }' is not assignable to parameter of type 'Action'.
Object literal may only specify known properties, and 'code' does not exist in type 'Action'.
What is this associate? is it same as admin?
It's just like customer just master screen
41:12 I don't get data in array. What can I do?
Are you getting any error?
Thanks for teaching such a real time projects, it helped us to develop our skills. Thanks a lot❤
Peoples like you make things worse, by writing un-maintainable code and increasing company cost. These things can be achieved with 50% less code as well.
Please understand TH-cam videos are just sharing ideas and concepts. It's not final solutions.