Complete CRUD Operation With Angular 9 Step by Step – PART 2

CRUD Operations with Angular - Part 2

This is Part 2 of Complete CRUD Operations With Angular 9. Here’s Part 1. In this part, we would set up the HTML table. Then we make a get request and display the data. We’ll cover the following

  1. Fetch Data From and API
  2. Display Data in HTML Table
  3. Add the Add-New Button
  4. Add the Details, Edit and Delete Buttons
  5. Next Steps

 

1. Fetch Data from an API

The HttpClient module is used make a HTTP GET request. To be able to fetch date from an API, you need to follow these steps:
Step 1: Add the HttpClientModule to the app.module.ts file

Step 2: In your friend.compont.ts file, write the Friend class, just after the import statement. The Friend class is shown below:

export class Friend {
  constructor(
    public id: number,
    public firstname: string,
    public lastname: string,
    public department: string,
    public email: string,
    public country: string
  ) {
  }
}

Step 3: In same file, on the FriendComponent class, add friends variable of type Friend[] i.e array of Friend objects.

Step 4: Add HttpClient variable as a parameter to the constructor.

Step 5: Then, write the getFriends function as shown below.

getFriends(){
  this.httpClient.get<any>('http://localhost:8888/friends').subscribe(
    response => {
      console.log(response);
      this.friends = response;
    }
  );
}

Step 6: Finally, call this function on the ngOnInit() method using this.getFriends()

Now you can launch the application. Then open the console and check that the data is actually fetched and displayed in the console.

 

2. Display Data in in HTML Table

Now, we are going to display this data in the friend.component.html file. Keep in mind that the friends variable now contain the list retrieved from the API. So we would iterate through this list using ngFor and display each record in HTML table row.

<div class="container">
  <table class="table table-bordered table-striped">
    <thead>
    <tr>
      <th>ID</th>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Department</th>
      <th>Email</th>
      <th>Country</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let friend of friends">
      <td><span>{{friend.id}}</span></td>
      <td><span>{{friend.firstname}}</span></td>
      <td><span>{{friend.lastname}}</span></td>
      <td><span>{{friend.department}}</span></td>
      <td><span>{{friend.email}}</span></td>
      <td><span>{{friend.country}}</span></td>
    </tr>
    </tbody>
  </table>
</div>

The code above is quite straightforward, so I’m not going to explain it. Also note that I have enclosed the table inside a div tag. Additionally, see that css classed added to the table tag. Just to make it look nice.

 

3. Add the Add-New Button

Now we would add all the button needed for Add New, Details, Edit and Delete. Let’s start with Add New. We’ll place this button above the table. Here’s the markup which includes a font-awesome icon

<div class="border">
  <button class="btn btn-md btn-outline-primary">
    <i class="fa fa-user"></i>New Friend</button>
</div>

Then add the style below to the Styles.css. This would add some space around the button.

.border{
  padding: 10px;
}
.btn{
  margin-right: 10px;
}
.fa {
  margin-right: 10px;
}

 

4. Add the Details, Edit and Delete Buttons

You need to create on more column in the table.  I will just provide you with the markup for the buttons, then you’ll easily understand it. Add the code below as one more column to the second row of the table

<td>
  <button class="btn btn-sm btn-info">
    <i class="fa fa-search"></i>Details</button>
  <button class="btn btn-sm btn-warning">
    <i class="fa fa-edit"></i>Edit</button>
  <button class="btn btn-sm btn-danger">
    <i class="fa fa-remove"></i>Delete</button>
</td>

Finally add this on more style to kind of reduce the spaced between the icon and the button.

table .btn{
  margin: 2px;
}

You can now  launch and view the friends page. If you followed the procedure correctly, this is what you’ll see, else leave me a comment.

CRUD Operations With Angular

CRUD Operations With Angular – HTML Table with Buttons

 

5. Next Steps

First, I’ll like to tell you congrats if you have come this far!. However, there’s yet much to be done. If you click on these buttons we added, nothing happens. So in the next part, we would add click events to the buttons. We’ll make them display a modal popup when clicked.

I’ll recommend you subscribe to my Channel on YouTube so when I make the video explanation, you’ll get notified.