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.

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:

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

9 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

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

    Where are the php files, mysql tables of this tutorial

    • June 9, 2017 at 12:37 pm

      Hi Saurabh, currently I have not used php as backend technology. This angular 4 example is using node server. I am going to write an end to end application with angular 4 and spring boot soon.

  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.

Leave a Reply

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