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:

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

Leave a Reply

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