Angular 11 CRUD with json-server | Bootstrap UI | Angular Reactive Form
Embed
- Published on May 10, 2021
- Angular 11 - CRUD operation from scratch.
In this video, I have explained all the concepts of Angular and created one project in angular with a fake JSON-Server.
Install Node : nodejs.org/en/
Install Angular : angular.io/cli
Install JSON-server : www.npmjs.com/package/json-se...
Bootstrap link : getbootstrap.com/
Telegram Link: LET'S PROGRAM
t.me/letsprogramYt Science & Technology
Do checkout my latest video on angular 13 CRUD with material UI thexvid.com/video/jGbP620NahE/video.html
Data is add on json server but data don't show on employee list module
@Nikhil Bhosale just check once your json server is installed properly check once formcontol object and your model code data types and also other API call
@Aditya raj same error
@Aditya raj connect with me on telegram will help you there 🙂
@Let's Program for post method i am getting bad request (400) error in console
You are great. You make it so simple and you have a gift to explain the process. I just waiting for to watch your last Angular CRUD video!! Good job!
Thanks ❤️🙂
Very useful content .I didn't find this content in other videos. Please keep coming up with such many more. Thank you so much for this one 👍
You're welcome 🙂
Bro,
plzz add sorting, pagination & search filter methods in this project ....its very useful to me tq🤝
Check my angular crud 13 video it has all those features
Thank you so much for describing it very clearly. Helped me alot.
Thank you so much.
This is so far the best lesson that I ever had.
Glad you liked it 🙂
your explanation was very clear. Thank you . Can you please make one login form including authentication. (when user is successfully registered and have user Name and password as credentials ) extending this example by using json server
Yeah i too want that authentication when user wants to login a application
Can't we make use of json server as backend for authentication
Bcoz being a front-end developer don't have much idea regarding dot net
Just for the practice sake I'm requesting you to make authentication using json as an extension to this project
Yeah sure , will cover this topic in angular authentication where I will use backend as .net core
You forgot to mention that we have to import API Service in 26:19 and also we have to inject the service in constructor.
how to import api??
i'm facing error here...............
Very interesting explanation, I really liked it. Could you share the project link on github?
Hello, please make the same project in the Material framework also. your teaching very clearly. thank you
Sure 🙂
Excellent work! It will very good if you create a complete project (maybe a small)
Sure 🙂
nice explanation bro... can you pls create this same crud operation in template driven form?
Such a clear way of teaching wonderful and really helpful lot to me. Thanks a lot bro
Thanks for the feedback 🙂
Do checkout my latest video on angular 13 CRUD with material UI
thank you sir for this lesson , keep supporting you..
your explaination is abundantly clear..
make more videos on Angular..
@Let's Program hii I'm facing bro can help me out
No doubt.🙏
Thanks for the support
The best
I have learn so many new things in this tutorial
Very good explanation 🔥
Thanks,
You can a try to the latest video as well with angular material.
You will surely love it 🙂
Explained it in a very clear and Simple way. It cleared all respective doubts. Thank You Sir.
You're welcome 🙂
you are excellent bro. If we just follow your video, we won't get any type of errors. crystal clear. you are the best.
Oh thanks for such a good feedback 🙂
Hi, First I didn't like the video and wanted to close it but decided to follow it and now I say it was GREAT and I learned a lot. Thank you!
Oh this is interesting
bro you are excellent, but how to change the value of id automatically on update or delete the data?
for example if we are adding 4 data in a database and they have ids 1,2,3,4 and when we are deleting the data of id:3, then it the id:4 should change to id:3?
How can we do that?
Hello thank you sir for this session, but i have small doubt u have used 'addemployee' button but this button automatically ajust right side in nav bar without any css..
@Let's Program thank you
I have used bootstrap class to do it
Hey, thank you for your video it was really help me lot. can you make video on CRUD operation on mat-table (datasource)
Yes definately, will create crud using angular material
Thank you so much shashi I am new in angular from this video crud Operation of my application done successfully. Your explanation is very clear and you are very helpful person 🙌 thank you so much😁
R you working as an angular developer??
Thanks for the wonderful feedback 🙂
Do checkout the latest video on angular 13 CRUD with material UI, you will definitely love it 🙂
Superb bro. Nice and clear explanation 😊
Teaching method is clear and nice ...keep it up brother... May u have get more
Super Goood video!! Can I ask if do you have a angular routing for this? Thank youu!!!
Will cover routing In upcoming videos, stay tuned 🙂
can you kindly do angular reactive forms + spring boot for backend, thanks in advance.
majorly helpful! thank you so much!
question: why did you choose to use the !: syntax?
Happy learning 🙂
Really great Job.. understand very clearly. Excellent bro
On the minutes 49 you saved my life. Thank you!
Now I came to know how to use the HTTP client module. I am appreciated but going through some errors. So could I have the GitHub link to this crud operation?
Excellent tutorial. Thanks brother.
Hi, Thanks for the video nice explanation - I implemented your code - Issue is my post method inserted null value. I don't know how to solve. Input data inserted 'null' value in my JSON server
Connect with me on telegram will help you there 🙂
Thank you for helping us. Very responsive
You're welcome 😊
Stay tuned for more videos 🙂
Excellent Bro... i Saw so much of videos... your explaination is very clear... Thankyou so much bro...
this is so awesome. Thank you sir.
Can you please send me the source code of this video.. Please my sister..
You're welcome 🙂
Very helpful video , Thankyou.
I have one question,
Is there any way to update that db.json file with our data , I need to update the json file on performing the crud operations.
Yes, it has been shown in the videos
Even though I define ReactiveFormsModule for formGroup in app.module.ts file, I get an error in .html file. Compiler error does not occur, html is loaded but I cannot retrieve data from form. Can you help?
Great explanation... Have a doubt sir, i cant understand that point how to pass the data from json server to localhost server
Hey, Thank you for the video it was really useful for me. After writing the delete event im getting this specified error could you please help me Thank you:) Error : "Property 'row' does not exist on type 'EmployeeDashboardComponent'."
I also have same problem ,property row does not exist on type 'Employee DashboardComponent',how to rectify it,please help me!!
@Pratyush Bhardwaj connect with me on telegram will help you there
Hi. I have received the same error. Can someone help me out on how to solve it?
@Let's Program Thank you so much for the quick response and helping in solving my error. Thank you for the angular crud video it really helped me its simple and understandable :)
@Ajay Krishna @sashik30
Thanks for sharing and very good content of crud operation in angular
You're welcome 🙂
so clean...worth spending TIME on this video. could you pls make video for the same with Angular material?
Thanks for those words. Will surely make CRUD using angular material soon 🙂
Great bro..Can u please make a video on validations please...
Thank u so much for this video very useful to me..
can we have the source project/git link for this?
thanks for this video. How to get value from modal if we have field as dropdown?
please if you can help me.
Please Keep your screen more zoom in for clear visibility, its getting difficult to see through the screen..
Yes, will do that,
Thanks for the feedback 😊
Superb. Sir can you create a tutorial crud with formarray dynamic using json server
And do checkout my latest video on angular 13 CRUD with material UI
Noted 🙂
Thank u so much for this...please tell how can we connect sql database with this form to store our all records
Nice explanation 👍
It's really good video.. Explanation and step are very clear... Very good..
Thank you 🙂
Sir, what if I need to view detail on each employee added in a different tab? can you give toturial on how to do that?
Yes I can do that, will create a video over it
this was very needed, thanks a lot and can u just tell me how to clear all data by a single button.
Thank you for the video. But can't add data to the json server. I see new entries in json file, but the values are empty. Can you help out here?
Connect with me on telegram will help you there 🙂
Best one..it was very helpful for me
marks my words, this person is going to rule in angular in next few years !!
@Avnish Yadav connect with me on telegram will help you there 🙂
@Let's Program brother i am getting this error plz tel me how to resolve since I am following every point of your code
core.js:6479 ERROR TypeError: Cannot read properties of undefined (reading 'postEmployee')
Will try my best, thanks for your comment 🙂❤️
1- How did you provide the MSSQL Database connection?
2- How should we communicate with MSSQL Database?
Watch my latest video, I have explained everything there 🙂
very awesome all doubt solve. love it
Thanks u for the video and buit-in confidence in me. Appreciated your work.
Your words are motivation for me to continue making videos for you guys 🙂
Nice i have learned how to do crud by json server, thanks
You're welcome 🙂
fue muy genial tu tutorial, saludos desde Perú
English please!!
Really helpful👍
Glad to hear that
Thank you sir for this topic , nice video
please add more projects like this
thanks for this video but how to restrict direct url access on json server
Please send the full code of this operation
in zip format
Brutal Video!!, i Learned a lot about of services thanks! greeting from Colombia
Great, happy learning 😊
You are awesome man ❣️
Thank you 🙂
Hello, sir I have made this same application by watching yours but now after saving it not re-running, how to re-run it?
really thanks for the tutorial training. by the way what exactly is angular json-server?
It's kind a fake server where you data stays. It creates a json file in your project and that get runs on the localhost://3000
Hi, can you help me to connect this crud to any database(mongodb/firebase)?
Also I have a problem with delete and update, Im pretty sure the cod is the same like yours but its not working :/ (In terminal I got message DELETE/posts2 404 5.245 ms - 2" )
@Let's Program Okay I got you. Everythink is working perfect right now ! Thank you !
You need to use / after the posts
Like delete/posts/"+id
hi can you give me the source code link please.
please make full mean stack project with similar employee data and more javascript.
Will make it soon 🙂
hey, nice video, but one thing is bugs when i click on edit btn and then click on Add Employee btn in this case not post any data and throw err (500 (Internal Server Error))
Hi there,
This video is very use full, thanks for that.
But I am getting an error in the following part
getAllEmployee(){
this.api.getEmployee()
.subscribe(res=>{
this.employeeData = res;
})
}
the error says"Expected 1 arguments, but got 0.ts(2554)
api.service.ts(18, 11): An argument for 'data' was not provided."
can u please help me
@Let's Program thank you very much for your help
@Varun Mutchina t.me/sashik30
@Let's Program how to share the file
@Let's Program how to share the file
Can you share you api.servicr.ts file so that I can check
bro pls make validations tutorial on this form
Sure will make very soon
Great explanation bro thanks
Happy learning 🙂
Can you retrieve the data(file names only) from external api and show them on angular web page with the crud functionality
Yes I have did that in add to cart project
Hi like i have one doubt if there is plus icon and need to insert tr on top of another tr is there a way insertCell(0) but is there a way in the angular to insert tr on above and below.
Bro, while I am Posting the data .. i am getting error like *can't read properties of undefined (reading 'postemployee')* 🙄
Bro .. Awesome Awesome....❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️u made my doubt clear
Happy to help 😊
In that particular add employee button unable to get dialogue box as shown in video is there any solution for that
@35:10 why there was no argument given to getEmployee() in gettAllEmployee ? since in apiService argument data was given
where is the source code for this ?
Thankyou Bro need more videos in angular... Waiting
Sure bro
Stay tuned 🙂
thank you so much bro. can make video with dashboard with side menu
very good lesson
Thank you 😊
your are my hero! sir.
1 like and 1 sub for you
Oh, thank you so much ❤️🙂
Hiiii I m ur new subscriber....
Can u plz make a project select option--- reactive form ..... With curd operation....
Anyone did ths ???? Plzzz help me..
How to add global filter bro? Give some hints
Sir. I did exactly what you did. I have got an error at 29:00..saying Subscribe is not a property of type void. Help please. Thanks a lot
@Let's Program ok Thank you sir
Inside api.service.ts the method postEmployee should be of type observable not void.
You have to return this.http.post()
Thq so much for this video but One thing is remain that is most important, form validation, null form also submitted in same form.
Yes, will cover validation in upcoming video
nice explanation bro
Thanks 😌
Thank you so much ♥️
Your welcome 🙂
its very nice bro.....just loved it...
I am glad you liked it 😊
Great work.!
Thanks 😀
Hi, I followed the video to see how to. I am having problem updating it. I don't know what I missed.
Hi, connect with me on telegram t.me/sashik30
will help you there
Can you show how to upload image similar to this??
Yes, will be uploading soon
Bro make complete tutorial on Angular.... 💓
@Let's Program thankyou bro
@Bharath Uppalanchi map operator is part of rxjs concept which helps to return your data and Also if you want to modify anything then it will help you to do it 👍
@Let's Program Can please say why we did .pipe(map()) in short ( in your words )
Sure bro will have complete series of angular on my channel
Everytime i open vs code newly the employee details doesn't add, only after restarting the json server it works.is this the correct way or is there any other solution?,also even after restarting the details added appears only after refreshing the page?
Thank you for this video
You're welcome 🙂