Angular 4 - CRUD Example App

Learn to perform CRUD operations using Angular 4. We will use an in-memory data store in this example to add, remove, update and delete products from an array.

We will be using Lodash and Bootstrap 4 in this example as well.

0:00 - Project Intro
1:30 - Setup with starter code explanation
6:52 - Create product Component and Service
11:42 - Code the getProducts() method
16:07 - Build data store for product items
19:55 - Code the Edit Products form
26:39 - Add new Products
31:33 - Update Products - part 1 (adding Lodash)
38:57 - Update Products - part 2
47:39 - Remove a Product
51:32 - Currency Pipe

[vkssngh]

Your lectures are very helpful, you know exactly how to present the complicated topics in the simpler possible way.
You're a gentleman and a scholar.
Why you stopped making videos.

Start making videos again we all are waiting for your knowledgeable lectures ☺☺☺
Thank you

[rajivrai]

clear information with suggestive steps. Very good tutorial for a beginner like me - something which inspires you to try it out instantly. Thanks and keep up this style.

[basudahal]

Really helpful tutorial. You are my hero! all others tutors are making little complicated for beginners like me.

[banshrajjaiswal]

@jsWiz..you have filterindex to get index value to update based on id match value & while deleting u have used ".indexof" property why we can not use same thing for update..please clear if i miss understood

[kunamate]

1 hour angular video, and its freee :O Thanks a lot for your effort :) !

[daviddonadze]

Thank you so much for this wonderful tutorial.

[chasnz]

Tutorial helped me a lot thanks. It would have perfect if the data was sourced from MongoDB. Could do please do another tutorial, as a follow-up to this one, about CRUD operations to a MEAN stack?

[stanleyhughes]

When I click on the + sign a form displays. However, when I then click on the edit button an additional form displays underneath the add form as opposed to population the existing form.

[warheadstyle]

thanks for this JsWiz, it really helped me understand alot of things that was a lil bit confusing.. following this youtube i thought the product-data.ts will also be updated.. can you please teach that or is it available only in your course?

[mshubhamtyagi]

I am using the same form for adding and updating the details but in my case, the parent is a module and child is the component name as userdetails & adduserdetails . In the parent, I have a table for displaying details. At the end of every data row, I have an action button through which I am sending this data row to the child component form for editing the details. But I have no idea how I change the form title when I am going to editing the user details. Please guide me.

[basudahal]

Do you have tutorial or do you know any best tutorial on deploying non-cli (NOT angular cli) application?

[RamRam-polq]

Thanks for u r Tutorial Really help full, can u add search filter and table row limit page navigation bottom of the table and show number of pages displayed left side

[MistralKriss]

Hello Sir, thank you for this tutorial.
I'm a teacher and I would like to ask you for the permission to use your tutorial to make my own tutorial, using angluar 5, to teach my students NG5. My tutorial would be in my own language, French(Probably published on youtube). And of course, I would give you the due credit for inspiring it.
Christian

[ashok-hgse]

Hello sir..I am getting an error ..like
Cannot read property 'length' of undefined..How to fix this..pls help!!

[chaitanwanjarri]

How you copy paste product.template.html which simple html form from resources you mentioned?

[gabszyztyletutorials]

Why did you use lodash? Can't you not update it without using lodash?

[denyprasetio]

Great tutorial. How about authentication?

[Hris]

It is interesting that you know Angular, but don't know the shortcuts for Copy and Paste...

[AuthenticPakistaniReviews]

will it cover main topics of Angular 4?

[bharatborikar]

Really very useful tutorial.. nice code..