Angular 11 CRUD with json-server | Bootstrap UI | Angular Reactive Form

Share
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 & TechnologyScience & Technology

Comments • 521

  • Let's Program
    Let's Program  3 months ago +5

    Do checkout my latest video on angular 13 CRUD with material UI thexvid.com/video/jGbP620NahE/video.html

    • Nikhil Bhosale
      Nikhil Bhosale Month ago

      Data is add on json server but data don't show on employee list module

    • Aditya raj
      Aditya raj Month ago +1

      @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

    • Nikhil Bhosale
      Nikhil Bhosale Month ago

      @Aditya raj same error

    • Let's Program
      Let's Program  2 months ago

      @Aditya raj connect with me on telegram will help you there 🙂

    • Aditya raj
      Aditya raj 2 months ago

      @Let's Program for post method i am getting bad request (400) error in console

  • Ciprian Irimia
    Ciprian Irimia Month ago +1

    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!

  • Spurti dalwai
    Spurti dalwai 4 months ago +2

    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 👍

  • kiran majji
    kiran majji 20 days ago

    Bro,
    plzz add sorting, pagination & search filter methods in this project ....its very useful to me tq🤝

    • Let's Program
      Let's Program  20 days ago +1

      Check my angular crud 13 video it has all those features

  • Vimal Raj B
    Vimal Raj B 28 days ago

    Thank you so much for describing it very clearly. Helped me alot.

  • Glauber Farias
    Glauber Farias 5 months ago +2

    Thank you so much.
    This is so far the best lesson that I ever had.

  • Atiya Jamal
    Atiya Jamal 11 months ago +3

    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

    • charan kumar
      charan kumar 9 months ago

      Yeah i too want that authentication when user wants to login a application

    • Atiya Jamal
      Atiya Jamal 11 months ago +2

      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

    • Let's Program
      Let's Program  11 months ago +1

      Yeah sure , will cover this topic in angular authentication where I will use backend as .net core

  • Rajesh Poudel
    Rajesh Poudel 29 days ago +4

    You forgot to mention that we have to import API Service in 26:19 and also we have to inject the service in constructor.

    • John Smith
      John Smith 11 days ago

      how to import api??
      i'm facing error here...............

  • matheus rocha
    matheus rocha Month ago

    Very interesting explanation, I really liked it. Could you share the project link on github?

  • Pankaj Karivadekar
    Pankaj Karivadekar 5 months ago

    Hello, please make the same project in the Material framework also. your teaching very clearly. thank you

  • vickyvikender
    vickyvikender 8 months ago +3

    Excellent work! It will very good if you create a complete project (maybe a small)

  • Sandip Sangvekar
    Sandip Sangvekar 10 months ago

    nice explanation bro... can you pls create this same crud operation in template driven form?

  • NARESH KUMAR
    NARESH KUMAR 3 months ago

    Such a clear way of teaching wonderful and really helpful lot to me. Thanks a lot bro

    • Let's Program
      Let's Program  3 months ago +1

      Thanks for the feedback 🙂
      Do checkout my latest video on angular 13 CRUD with material UI

  • Tanya Chauhan
    Tanya Chauhan 11 months ago +6

    thank you sir for this lesson , keep supporting you..
    your explaination is abundantly clear..
    make more videos on Angular..

    • jagannath
      jagannath Month ago

      @Let's Program hii I'm facing bro can help me out

    • Komal
      Komal 7 months ago

      No doubt.🙏

    • Let's Program
      Let's Program  11 months ago +3

      Thanks for the support

  • kunal parmar
    kunal parmar 3 months ago

    The best
    I have learn so many new things in this tutorial
    Very good explanation 🔥

    • Let's Program
      Let's Program  3 months ago +1

      Thanks,
      You can a try to the latest video as well with angular material.
      You will surely love it 🙂

  • Dipali Dawande
    Dipali Dawande 3 months ago

    Explained it in a very clear and Simple way. It cleared all respective doubts. Thank You Sir.

  • Ramesh Babu
    Ramesh Babu 8 months ago

    you are excellent bro. If we just follow your video, we won't get any type of errors. crystal clear. you are the best.

  • Nasim Baradaran
    Nasim Baradaran 8 months ago

    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!

  • Animesh Thakur
    Animesh Thakur 6 months ago +1

    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?

  • Om Prakash
    Om Prakash 7 months ago

    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..

  • Somesh Jagtap
    Somesh Jagtap 9 months ago +1

    Hey, thank you for your video it was really help me lot. can you make video on CRUD operation on mat-table (datasource)

    • Let's Program
      Let's Program  9 months ago +2

      Yes definately, will create crud using angular material

  • Vrushali Thakare
    Vrushali Thakare 3 months ago +2

    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😁

    • RockkkStaRRR
      RockkkStaRRR Month ago

      R you working as an angular developer??

    • Let's Program
      Let's Program  3 months ago

      Thanks for the wonderful feedback 🙂
      Do checkout the latest video on angular 13 CRUD with material UI, you will definitely love it 🙂

  • navya navi
    navya navi 6 months ago +1

    Superb bro. Nice and clear explanation 😊

  • new movies
    new movies 4 months ago

    Teaching method is clear and nice ...keep it up brother... May u have get more

  • Jennicar Shane J. Alonzo
    Jennicar Shane J. Alonzo 11 months ago +1

    Super Goood video!! Can I ask if do you have a angular routing for this? Thank youu!!!

    • Let's Program
      Let's Program  11 months ago +1

      Will cover routing In upcoming videos, stay tuned 🙂

  • Clifford Mahwite
    Clifford Mahwite 10 months ago +4

    can you kindly do angular reactive forms + spring boot for backend, thanks in advance.

  • Amy Zunino
    Amy Zunino 3 months ago

    majorly helpful! thank you so much!

    • Amy Zunino
      Amy Zunino 3 months ago

      question: why did you choose to use the !: syntax?

    • Let's Program
      Let's Program  3 months ago

      Happy learning 🙂

  • anil ui
    anil ui 10 months ago

    Really great Job.. understand very clearly. Excellent bro

  • Erismeiris Hidalgo Reyes

    On the minutes 49 you saved my life. Thank you!

  • satendra patel
    satendra patel 11 months ago

    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?

  • Srikanth Ambal Dhage
    Srikanth Ambal Dhage 6 months ago

    Excellent tutorial. Thanks brother.

  • Shyam Sundar
    Shyam Sundar 10 months ago

    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

    • Let's Program
      Let's Program  10 months ago

      Connect with me on telegram will help you there 🙂

  • Zenrine TV
    Zenrine TV 11 months ago +1

    Thank you for helping us. Very responsive

    • Let's Program
      Let's Program  11 months ago +1

      You're welcome 😊
      Stay tuned for more videos 🙂

  • Vignesh sridhar
    Vignesh sridhar Year ago +6

    Excellent Bro... i Saw so much of videos... your explaination is very clear... Thankyou so much bro...

  • Rechelle Obligado
    Rechelle Obligado 9 months ago +3

    this is so awesome. Thank you sir.

    • Vamshi Choula
      Vamshi Choula 7 months ago

      Can you please send me the source code of this video.. Please my sister..

    • Let's Program
      Let's Program  9 months ago

      You're welcome 🙂

  • Piyush Pawar
    Piyush Pawar 3 months ago

    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.

  • Ali Parlatti
    Ali Parlatti 4 months ago

    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?

  • YARRA PUSHPA LATHA
    YARRA PUSHPA LATHA 9 months ago

    Great explanation... Have a doubt sir, i cant understand that point how to pass the data from json server to localhost server

  • Ajay Krishna
    Ajay Krishna 9 months ago

    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'."

    • 040 RABIYATHUL RAIHAN S
      040 RABIYATHUL RAIHAN S 3 months ago

      I also have same problem ,property row does not exist on type 'Employee DashboardComponent',how to rectify it,please help me!!

    • Let's Program
      Let's Program  7 months ago

      @Pratyush Bhardwaj connect with me on telegram will help you there

    • Pratyush Bhardwaj
      Pratyush Bhardwaj 7 months ago

      Hi. I have received the same error. Can someone help me out on how to solve it?

    • Ajay Krishna
      Ajay Krishna 9 months ago

      @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 :)

    • Let's Program
      Let's Program  9 months ago

      @Ajay Krishna @sashik30

  • Murtaza Mohammadi
    Murtaza Mohammadi 6 days ago

    Thanks for sharing and very good content of crud operation in angular

  • me jaay
    me jaay 10 months ago

    so clean...worth spending TIME on this video. could you pls make video for the same with Angular material?

    • Let's Program
      Let's Program  10 months ago +1

      Thanks for those words. Will surely make CRUD using angular material soon 🙂

  • prince bobby
    prince bobby 8 months ago

    Great bro..Can u please make a video on validations please...

  • Dipali Bidave
    Dipali Bidave Month ago

    Thank u so much for this video very useful to me..

  • Anika Anjum Una
    Anika Anjum Una 3 days ago

    can we have the source project/git link for this?

  • moiz lokhandwala
    moiz lokhandwala 8 months ago

    thanks for this video. How to get value from modal if we have field as dropdown?
    please if you can help me.

  • jungkook's Euphoric field

    Please Keep your screen more zoom in for clear visibility, its getting difficult to see through the screen..

    • Let's Program
      Let's Program  6 months ago +1

      Yes, will do that,
      Thanks for the feedback 😊

  • Suman Kumar
    Suman Kumar 3 months ago

    Superb. Sir can you create a tutorial crud with formarray dynamic using json server

  • Neha Shukla
    Neha Shukla 4 months ago

    Thank u so much for this...please tell how can we connect sql database with this form to store our all records

  • Manjunath madiwal
    Manjunath madiwal 7 months ago +1

    Nice explanation 👍

  • priya purandare
    priya purandare 6 months ago

    It's really good video.. Explanation and step are very clear... Very good..

  • Sai Stone
    Sai Stone 7 months ago

    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?

    • Let's Program
      Let's Program  7 months ago

      Yes I can do that, will create a video over it

  • shubham rangari
    shubham rangari 4 months ago

    this was very needed, thanks a lot and can u just tell me how to clear all data by a single button.

  • Daniel Dietrich
    Daniel Dietrich 3 months ago

    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?

    • Let's Program
      Let's Program  3 months ago

      Connect with me on telegram will help you there 🙂

  • Kasturi Vats
    Kasturi Vats 5 months ago

    Best one..it was very helpful for me

  • Avnish Yadav
    Avnish Yadav 7 months ago

    marks my words, this person is going to rule in angular in next few years !!

    • Let's Program
      Let's Program  7 months ago

      @Avnish Yadav connect with me on telegram will help you there 🙂

    • Avnish Yadav
      Avnish Yadav 7 months ago

      @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')

    • Let's Program
      Let's Program  7 months ago

      Will try my best, thanks for your comment 🙂❤️

  • Mustafa Çamlıca
    Mustafa Çamlıca 6 months ago

    1- How did you provide the MSSQL Database connection?
    2- How should we communicate with MSSQL Database?

    • Let's Program
      Let's Program  6 months ago

      Watch my latest video, I have explained everything there 🙂

  • Achal Dhote
    Achal Dhote 3 months ago

    very awesome all doubt solve. love it

  • Archana Gurde
    Archana Gurde 11 months ago +1

    Thanks u for the video and buit-in confidence in me. Appreciated your work.

    • Let's Program
      Let's Program  11 months ago +1

      Your words are motivation for me to continue making videos for you guys 🙂

  • Rathika Murugesan
    Rathika Murugesan 6 months ago

    Nice i have learned how to do crud by json server, thanks

  • OscarTech 21
    OscarTech 21 8 months ago

    fue muy genial tu tutorial, saludos desde Perú

  • Kiran Seersath
    Kiran Seersath Year ago +2

    Really helpful👍

  • Mariya James
    Mariya James 9 months ago

    Thank you sir for this topic , nice video

  • 31sar
    31sar 9 months ago +2

    please add more projects like this

  • Idrees Kema
    Idrees Kema 3 months ago

    thanks for this video but how to restrict direct url access on json server

  • Rajesh Prasath Rajendran

    Please send the full code of this operation
    in zip format

  • Cristian Otero
    Cristian Otero Month ago

    Brutal Video!!, i Learned a lot about of services thanks! greeting from Colombia

  • new movies
    new movies 4 months ago

    You are awesome man ❣️

  • Mariyam Ali
    Mariyam Ali 5 months ago

    Hello, sir I have made this same application by watching yours but now after saving it not re-running, how to re-run it?

  • DAIROU NJANKOUO
    DAIROU NJANKOUO 7 months ago

    really thanks for the tutorial training. by the way what exactly is angular json-server?

    • Let's Program
      Let's Program  7 months ago

      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

  • LAJT
    LAJT 11 months ago +2

    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" )

    • LAJT
      LAJT 11 months ago

      @Let's Program Okay I got you. Everythink is working perfect right now ! Thank you !

    • Let's Program
      Let's Program  11 months ago +2

      You need to use / after the posts
      Like delete/posts/"+id

  • hiba aloui
    hiba aloui 3 months ago

    hi can you give me the source code link please.

  • Komal
    Komal 7 months ago

    please make full mean stack project with similar employee data and more javascript.

  • Adarsh singh
    Adarsh singh 7 months ago

    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))

  • Varun Mutchina
    Varun Mutchina 10 months ago +1

    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

    • Varun Mutchina
      Varun Mutchina 10 months ago

      @Let's Program thank you very much for your help

    • Let's Program
      Let's Program  10 months ago +3

      @Varun Mutchina t.me/sashik30

    • Varun Mutchina
      Varun Mutchina 10 months ago

      @Let's Program how to share the file

    • Varun Mutchina
      Varun Mutchina 10 months ago

      @Let's Program how to share the file

    • Let's Program
      Let's Program  10 months ago

      Can you share you api.servicr.ts file so that I can check

  • Sandip Sangvekar
    Sandip Sangvekar 10 months ago

    bro pls make validations tutorial on this form

  • Krishna  Sahu
    Krishna Sahu 7 months ago

    Great explanation bro thanks

  • Anant
    Anant 8 months ago

    Can you retrieve the data(file names only) from external api and show them on angular web page with the crud functionality

    • Let's Program
      Let's Program  7 months ago

      Yes I have did that in add to cart project

  • Sudhish Ramachandran
    Sudhish Ramachandran 2 months ago

    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.

  • siva raju
    siva raju 2 months ago +1

    Bro, while I am Posting the data .. i am getting error like *can't read properties of undefined (reading 'postemployee')* 🙄

  • Bengal Tiger
    Bengal Tiger 8 months ago

    Bro .. Awesome Awesome....❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️u made my doubt clear

  • Abhishek Abhi
    Abhishek Abhi 10 months ago

    In that particular add employee button unable to get dialogue box as shown in video is there any solution for that

  • pankaj thakur
    pankaj thakur 5 months ago

    @35:10 why there was no argument given to getEmployee() in gettAllEmployee ? since in apiService argument data was given

  • Kavitha S
    Kavitha S Month ago

    where is the source code for this ?

  • Im Jhon6996
    Im Jhon6996 Year ago +1

    Thankyou Bro need more videos in angular... Waiting

  • JAI SURYA SIVA KUMAR
    JAI SURYA SIVA KUMAR 2 months ago

    thank you so much bro. can make video with dashboard with side menu

  • Shreyas dance
    Shreyas dance 11 months ago +2

    very good lesson

  • Khoa Nguyen Dang
    Khoa Nguyen Dang 8 months ago

    your are my hero! sir.
    1 like and 1 sub for you

  • Khusi Kar
    Khusi Kar 7 months ago

    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..

  • Utkarsh Lanjewar
    Utkarsh Lanjewar 28 days ago

    How to add global filter bro? Give some hints

  • Mahesh Rath
    Mahesh Rath 7 months ago

    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

    • Mahesh Rath
      Mahesh Rath 7 months ago

      @Let's Program ok Thank you sir

    • Let's Program
      Let's Program  7 months ago

      Inside api.service.ts the method postEmployee should be of type observable not void.
      You have to return this.http.post()

  • Anil kuMar
    Anil kuMar 11 months ago +1

    Thq so much for this video but One thing is remain that is most important, form validation, null form also submitted in same form.

    • Let's Program
      Let's Program  11 months ago

      Yes, will cover validation in upcoming video

  • navya navi
    navya navi 5 months ago +1

    nice explanation bro

  • Nobel Bermoy
    Nobel Bermoy 11 months ago +1

    Thank you so much ♥️

  • SAIBAL MISRA
    SAIBAL MISRA 10 months ago

    its very nice bro.....just loved it...

  • mariappan mari
    mariappan mari 6 months ago

    Great work.!

  • Peter Erdachew
    Peter Erdachew 9 months ago

    Hi, I followed the video to see how to. I am having problem updating it. I don't know what I missed.

    • Let's Program
      Let's Program  9 months ago

      Hi, connect with me on telegram t.me/sashik30
      will help you there

  • TechPs
    TechPs 3 months ago

    Can you show how to upload image similar to this??

  • Bharath Uppalanchi
    Bharath Uppalanchi 10 months ago

    Bro make complete tutorial on Angular.... 💓

    • Bharath Uppalanchi
      Bharath Uppalanchi 10 months ago +1

      @Let's Program thankyou bro

    • Let's Program
      Let's Program  10 months ago +1

      @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 👍

    • Bharath Uppalanchi
      Bharath Uppalanchi 10 months ago

      @Let's Program Can please say why we did .pipe(map()) in short ( in your words )

    • Let's Program
      Let's Program  10 months ago +2

      Sure bro will have complete series of angular on my channel

  • melodious melodies
    melodious melodies 8 months ago

    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?

  • Gaurav Chauhan
    Gaurav Chauhan 8 months ago

    Thank you for this video