It's often the case with Angular Material tables that you want to the app to perform some action when the user clicks on one of the rows. In some instances, you might even want to take the user to a new route.

Fortunately, that's pretty easy to do. In this guide, I'll show you how to make it happen.

Or you can just take a look at the code on GitHub.

Remember: if you're having problems running the Angular app locally, be sure to check the README.

Please note: this guide is a part of an ongoing series of tutorials on how to create a customer relationship management (CRM) application from scratch. The GitHub code for each guide belongs to a specific branch. The master branch holds the entire application up to the current date. If you want to follow the whole series, just view the careydevelopmentcrm tag. Note that the website displays the guides in reverse chronological order so if you want to start from the beginning, go to the last page.

The Business Requirements

Your boss Smithers walks into your office wearing a white T-shirt for some reason.

"About that CRM app you're working on," he says as he sits down and sticks out his chest. "I need you to make an update to the table that shows the contacts."

He looks like he's trying to flex his biceps.

"I need you to enable users to click on a row in that table so they can edit the contact info," Smithers continues. "And make it happen as quickly as possible."

He walks out of your office winding his arms.

The Table, Revisited

You've already created an Angular Material table that shows all of a user's contacts. Now you just need to make a few updates to it.

Also, you've already got an edit page working for contacts. However, right now users need to manually enter the URL in the browser. That's not very user-friendly.

You can make it user-friendly by enabling users to click on a contact's row in the table if they want to edit the info for that contact.

They might want to update the phone numbers, addresses, status, or something else.

You're going to make their lives easier.

Click It or Ticket

The first thing you need to do is make the row itself clickable. That's a breeze with Angular and TypeScript.

Update view-contacts.component.html. Change the part that displays the row for a contact to look like this:

<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="editContact(row)"></tr>

The update there is that the code is binding the click event to a method that will handle the process of taking the user to a new route.

Of course, that method doesn't exist yet. So you'd better create it in view-contacts.component.ts:

  editContact(contact: Contact) {
    let route = '/contacts/edit-contact';
    this.router.navigate([route], { queryParams: { id: contact.id } });
  }

The first thing that method is doing is it's establishing the full route, minus any request parameters. In this case, the route is /contacts/edit-contact.

But that's not enough info by itself. The route needs to know which contact to edit.

That's why it enlists the aid of a query parameter. The query parameter here is called "id" and it unsurprisingly maps to the ID of the contact.

In other words, id in the queryParams object above maps to contact.id. Take a look at the code above and you'll see that.

So the full route will ultimately look like this: /contacts/edit-contact?id=33b5523aa2

And yes, it's best to handle query parameters the way you see above rather than trying to concatenate a string. You'll end up with encoding issues.

The code you've done so far will do the trick by itself. But you really should add some styling to make things a little more user-friendly.

Clicking in Style

Update the view-contacts.component.css file and add this bit:

.mat-row:hover {
  background-color: #E8EAF6;
  cursor: pointer;
}

That does two things:

  • It colors the row as the user hovers over it. That's typically a best-practice.
  • It changes the cursor to a pointer when the user hovers over any row. That's how the user will know that the row is clickable.

And that's it. Now you're ready to test it.

Testing Time

Now save all your work and fire up your Angular app.

Remember: you also need to start your Spring Boot supporting applications: both the user service and the contact service.

Once everything is up and running, head over to http://localhost:4200/login and login with the usual credentials (darth/thedarkside).

Now, click on Contacts and View Contacts from the left-hand sidebar. Hover your mouse cursor over a row in the table and it should light up.

 

Click on a row and the app should take you to the edit page for that contact.

 

Congratulations! You've got your clicabkle rows!

Wrapping It Up

Your turn.

Adapt the new code to suit your own purposes. Change the color of the highlight in the row. Add another query parameter to the URL.

And when you're done with that, feel free to look at the source code on GitHub.

Have fun!

Photo by Tirachard Kumtanom from Pexels