Complete CRUD Operations with Angular 9 Step by Step – Part 1 (Setup)

In this tutorial I would explain how to perform CRUD operations(GET, POST, PUT and DELETE) with Angular 9.

1. Build an API in Spring Boot
2. Setup an Angular App
3. Add Some UI Libraries
4. Create the Components
5. Configure Some Angular Routes
6. Setup the the Template
7. Setup the Home Page
8. Next Steps

FriendsAPI: 9001, FriendsUI: 9002

1 – Build an API in Spring Boot

I normally do this with Spring Boot. You should already know how to do this. However, these are roughly the steps:

Create a new Spring Project add the jpa, and Web and H2 dependencies.

Add the FriendController.java, Friend.java, FriendService.java and FriendRepository.java files. Then also the data.sql file containing some initial sql query to add some initial data. I recommend using H2 database. See the setting below you can put in your application.properties file.

spring.h2.console.enabled=true
spring.jpa.hibernate.ddl-auto=update
spring.datasource.platform=h2 
spring.datasource.url=jdbc:h2:mem:frienddb

Setting up H2 

2 – Setup an Angular App

Create a folder you’ll like your application to be in. Open the terminal, navigate to this folder and run the command to create an Angular app in this folder

ng new AngularDemo

After the app is create, navigate into the folder. Then run the command below

ng serve

The app would be launched, so you can test it.

3 – Add Some UI Libraries

Normally, I like to add Bootstrap, JQuery, ngx-bootstrap and AngularMaterial and Font-Awesome. The commands below would do just that. Note that you run them, one after the other.

npm install bootstrap --save

npm install font-awesome --save

npm install angular-material --save

ng add @ng-bootstrap/ng-bootstrap

Note: If you have error installing ng-bootstrap, then you may have to execute the command below to allow legacy dependencies.

npm config set legacy-peer-deps true

To be able to bootstrap and font-awesome in your page, open the styles.css file and add the following in it:

@import "~bootstrap/dist/css/bootstrap.css";
@import "~font-awesome/css/font-awesome.css";

4 – Create the Components

Components are simply different parts of the user interface. They can also be different pages. In this example would need two components:

• one for the home page
• the other to display a list friends

To create a  the components, run the command below. You need to run one after the other.

ng generate component home

ng generate component friend

5 – Add Some Routing

Angular Routing is simply a way to add navigation to your application. This  how it would look like:

• if a user visits /home, the home component would render
• if a user visits /friends, the friends component would render
• however, if a user does not enter any path, then the it should go to the home component

These settings are made in the file, app-routing.module.ts. You can find it inside the src/app folder. So open this file and add the following routes:

const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'friends', component: FriendComponent},
  {path: '', component: HomeComponent}
];

6 – Setup the Template

Normally, I love working with templates. So my tutorials would look like real applications. You can get bootstrap templates from here. However, we just need the header so, simply use the code below.  We would add this header just once, and make it appear in all the pages.

• Open the the app.components.html file.
• Delete all the code in it except the <router-outlet></router-outlet>
• Just above the <router-outlet> tag, paste the template code.

So the whole content of the the app.component.html file is this:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="navbar-brand" href="/home">Home</a>
</nav>

<router-outlet></router-outlet>

Now you can test the app. Launch it and visit /home and /friends and see that it works great!

7 – Setup the Home Page

I would like to have home page setup similar the the figure below. This is where Angular-Material and Font-Awesome comes in!.

Open the home component and add the code below:

<div class="container">
  <div class="row">
    <div class="col-sm">
      <a href="/friends"
         role="button"
         class="btn btn-outline-primary btn-lg btn-block text-center">
        <span><i class="fa fa-users"></i></span>
        <br>Friends
      </a>
    </div>
    <div class="col-sm">
      Button 2
    </div>
    <div class="col-sm">
      Button 3
    </div>
    <div class="col-sm">
      Button 4
    </div>
  </div>
</div>

Then you also need to add this code below to the Styles.css. This code would add some margin between the header and the content of the page.

.container{
  margin-top:5%;
}

8. Next Steps + Exercises

In the next (Part 2), we would work on the friends page. We would use the HttpClient service to make a HTTP REST API call to retrieve a list of friends. Then we would set up a html table  and display the friends components in the table.

For now, I recommend you do this exercise below:

Exercises: Create three more button in the home page similar to the first one