Angular 4 CRUD example

The following two tabs change content below.
Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

Latest posts by Prasad Kharkar (see all)

In last article, we used angular http service in our favourite bikes app. Now we are going to create angular 4 crud example.

Angular 4 CRUD Example:

It would be great to checkout branch angular-crud-app from repository https://github.com/theJavaGeek/angular.

Our objective is to be able to extend our bike app to :

  • be able to add, update and delete bikes.
  • be able to create bike on localhost:4200/bikes.
  • be able to delete bike from bikes list shown on localhost:4200/bikes.
  • be able to update bike information from bike-info page.

We need to implement angular 4 crud example as below.

  • update BikeService to write methods addBike(), updateBike() and deleteBike().
  • update BikeInfoComponent to be able to navigate back and save bike details.
  • update BikesComponent to input a new bike and delete existing bikes.

Let’s get started with code.

bike.service.ts:

  • createBike(bike: Bike):  takes a bike object as parameter and makes a http POST request to ‘api/bikes‘ with data as new bike object. Created bike is returned as Promise.
  • updateBike(bike: Bike): takes a bike object as parameter and makes http PUT request to update bike details by id.
  • deleteBike(bike: Bike): takes bike object as parameter and makes http DELETE request to delete bike by id.

bike-info.component.html:

  • Note that we are simply showing existing bike information and providing input boxes for it to update information.
  • We have added two actions. Back action simply navigates to previous page and Update action saves newly entered bike details.

bike-info.component.ts:

  • we injected Location class so that we can use its methods.
  • updateBike(): simply calls updateBike(bike : Bike) from BikeService.
  • goBack(): simply navigates to previous page.

We modified BikeInfo component bike details. i.e. Work for update is done for angular 4 crud example. Let us see how to create and delete bikes.

bikes.component.ts:

  • This page has a form to create bike. Button calls createBike(newBike) method from bikes.component.ts.
  • Then it shows the list of all bikes. Delete button appears in front of each bike name. On click, it will call “deleteBike(bike)” from bikes.component.ts.  $event.stopPropagation() stops the app to navigate to bike details. This is because we are technically clicking on list item and it is supposed to navigate to bike info page.

bikes.component.ts:

  • createBike(bike: Bike) : Invokes createBike(bike: bike) from BikeService and pushes current bike in bikes array.
  • deleteBike(bike : Bike): invokes deleteBike from BikeService and nullifies selectedBike.

Angular 4 CRUD example is almost done. We just need to modify AppModule to include animations.

app.module.ts:

app-routing.module.ts

 

complete angular 4 crud app is available at https://github.com/theJavaGeek/angular. Checkout branch angular-crud-app.

Ok. Fire up your server and hit http://localhost:4200/bikes. You should be able to view page below.

Enter “Panigale 1299” in model and Ducati in Manufacturer field and click “Create Bike”. It will be added to the array. Click on it and you will go to bike info page.

 

Click update, you will go back to bikes screen where you will be able to see panigale is updated to new panigale.

I hope this angular 4 CRUD example helped.

Share Button

24 comments for “Angular 4 CRUD example

  1. June 7, 2017 at 7:11 am

    Highly Impressed by sharing of this Angular 4 code, as well as embedding some explanations

    • June 7, 2017 at 8:33 am

      Thank you Gil. Any constructive feedback is always welcome. Feel free to do so.

  2. June 7, 2017 at 7:41 am

    Unfortunately it did not compile (Win 10):

    ERROR in C:/Users/Gil/Documents/GitHub/angular/src/app/app.module.ts (25,20): Property ‘forRoot’ does not exist on type ‘typeof MaterialModule’.

    ERROR in Error encountered resolving symbol values statically. Calling function ‘MaterialModule’, function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in C:/Users/Gil/Documents/GitHub/angular/src/app/app.module.ts, resolving symbol AppModule in C:/Users/Gil/Documents/GitHub/angular/src/app/app.module.ts

    ERROR in C:/Users/Gil/Documents/GitHub/angular/src/app/app.module.ts (25,20): Property ‘forRoot’ does not exist on type ‘typeof MaterialModule’.
    webpack: Failed to compile.

    • June 7, 2017 at 8:35 am

      strange that it is failing to compile. There seems to be some configuration mismatch. Are you sure you are using the same configuration as that of mine?

      • June 8, 2017 at 5:48 pm

        Thanks for responding, Prasad. I have figured out that the reason for the compilation failure is the revoking of this one:
        MaterialModule.forRoot(),
        I have never worked with materials, so I’m stuck on that one

    • Wiruj
      August 10, 2017 at 9:58 am

      You can remove forRoot(), because it already deprecate and remove by the author.

  3. saurabh
    June 9, 2017 at 11:15 am

    Where are the php files, mysql tables of this tutorial

  4. Karanveer singh bajwa
    June 21, 2017 at 7:46 am

    Will the array of bike info stored in a file?

    • June 21, 2017 at 12:27 pm

      It using InMemoryWebApiModule so it will be storedi in memory.

  5. MK
    July 5, 2017 at 3:55 pm

    After hit http://localhost:4200/bikes. I just get loading….. screen nothing else.

    • July 7, 2017 at 11:40 am

      can you see anything in browser developer tools console? You must be getting some error.

  6. Maulin Shah
    July 20, 2017 at 12:59 pm

    Hi Prasad,

    Can you share app-routing.module.ts file? And also how to install angular-in-memory-web-api?

    • July 20, 2017 at 4:02 pm

      Hi Maulin,

      I have added the required file. You can always take the project from git repository url shared in the article. All files are available.

  7. Mahi
    July 22, 2017 at 12:10 am

    Is using Promise make sense here instead of implementing Observable ?

  8. Medi
    August 1, 2017 at 2:16 pm

    Unfortunately it did not compile (Win 10):

    24 error Windows_NT 6.1.xxxx
    25 error argv “C:\\Program Files\\nodejs\\node.exe” “C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “bug” “bikes”
    26 error node v6.11.2
    27 error npm v3.10.10
    28 error code E404
    29 error 404 Registry returned 404 for GET on http://registry.npmjs.org/bikes
    30 error 404
    31 error 404 ‘bikes’ is not in the npm registry.
    32 error 404 You should bug the author to publish it (or use the name yourself!)
    33 error 404 Note that you can also install from a
    34 error 404 tarball, folder, ht

    • August 4, 2017 at 9:19 am

      Its strange that it is looking for dependencies “bikes”. It is a project and it has dependencies defined in package.json. Could you please tell me what is the procedure that you followed?

  9. Medi
    August 1, 2017 at 2:18 pm

    *Win 7

  10. Wiruj
    August 10, 2017 at 9:57 am

    Hi, I got error that it cannot find the css file, but it working properly. How should I fix this error ?

  11. Jonathan
    October 3, 2017 at 12:55 am

    Thank you Prasad, you’re very friendly!!!

Leave a Reply

Your email address will not be published. Required fields are marked *