Inline Table Editing in Angular 13

Angular is a powerful JavaScript framework that allows developers to build robust and dynamic web applications. One useful feature of Angular is the ability to perform inline table editing, which allows users to edit table data directly within the table itself, without the need for any pop-up forms or dialog boxes.

In this tutorial, we will learn how to implement inline table editing in Angular 13. This tutorial is primarily designed for beginners who are just starting with Angular.

Prerequisites

In order to follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. It’s also recommended to have Angular CLI (Command Line Interface) installed on your machine.

If you haven’t installed Angular CLI, you can do so by running the following command:

npm install -g @angular/cli

Step 1: Setting Up an Angular Project

To begin, let’s create a new Angular project by running the following command in your terminal:

ng new inline-table-editing

This will create a new directory called “inline-table-editing” with the initial project structure.

Navigate into the project directory:

cd inline-table-editing

Step 2: Creating the Table Component

Next, let’s generate a new component called “table” using Angular CLI:

ng generate component table

This will create a new directory called “table” inside the “src/app” directory, and generate the necessary files for the component.

Open the newly generated “table.component.html” file and replace the existing code with the following:

<table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let user of users">
        <td [contentEditable]="user.isEditing">{{ user.name }}</td>
        <td [contentEditable]="user.isEditing">{{ user.email }}</td>
        <td>
          <button (click)="editUser(user)">Edit</button>
          <button (click)="deleteUser(user)">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>

In this code snippet, we have defined a table structure with three columns: Name, Email, and Actions. The “contentEditable” attribute is used to make the table cells editable. We are also using Angular’s *ngFor directive to iterate over the “users” array and dynamically display the data.

Step 3: Adding Functionality to the Table Component

Now, open the “table.component.ts” file and replace the existing code with the following:

import { Component } from '@angular/core';

  @Component({
    selector: 'app-table',
    templateUrl: './table.component.html',
    styleUrls: ['./table.component.css']
  })
  export class TableComponent {
    users = [
      { name: 'John Doe', email: 'johndoe@example.com', isEditing: false },
      { name: 'Jane Smith', email: 'janesmith@example.com', isEditing: false },
      { name: 'Mike Johnson', email: 'mikejohnson@example.com', isEditing: false }
    ];
  
    editUser(user: any) {
      user.isEditing = true;
    }
  
    deleteUser(user: any) {
      const index = this.users.indexOf(user);
      this.users.splice(index, 1);
    }
  }

This code defines a class called “TableComponent” that contains the users array, which holds the user data. We have also defined two methods – “editUser” and “deleteUser” – to handle the edit and delete functionality, respectively.

Step 4: Displaying the Table Component

Finally, let’s update the “app.component.html” file to display the table component:

<app-table></app-table>

Save the file and open your browser. You should now see the table with the user data displayed. Try clicking the “Edit” button next to a user’s row – the corresponding table cells should become editable. You can also click the “Delete” button to remove a user from the table.

Conclusion

In this tutorial, we have learned how to implement inline table editing in Angular 13. By using the contentEditable attribute and Angular directives, we were able to create a simple table component that allows users to edit and delete data directly within the table. This functionality can be further extended and customized as per your application requirements.

For more advanced topics and features of Angular, be sure to explore the official Angular documentation and other online tutorials.

Happy coding!