Inline Table Editing in Angular 15

Welcome to the first part of our Angular tutorial series on inline table editing. In this tutorial, we will learn how to implement inline editing in a table using Angular 15. Inline editing allows the user to edit data directly in the table without the need for a separate form or popup.

Prerequisites

Before we begin, make sure you have a basic understanding of HTML, CSS, and JavaScript. It is also recommended to have some knowledge of Angular and its concepts. If you are new to Angular, you can check out our Angular tutorials for beginners to get started.

Setting up the project

First, let’s create a new Angular project. Open your terminal or command prompt and run the following commands:

    ng new inline-table-editing-angular-15
    cd inline-table-editing-angular-15
    ng serve
  

This will create a new Angular project and start a development server. Now, open your project in your favorite code editor and let’s get started with the implementation.

Implementing inline table editing

For the purpose of this tutorial, we will create a simple table with some sample data and allow the user to edit the data inline. We will use Angular 15’s data binding and event handling to achieve this.

First, open the app.component.html file in your project and add the following code to create a basic table:

    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let user of users">
          <td>
            <span *ngIf="!user.editing">{{ user.name }}</span>
            <input *ngIf="user.editing" [(ngModel)]="user.name">
          </td>
          <td>
            <span *ngIf="!user.editing">{{ user.email }}</span>
            <input *ngIf="user.editing" [(ngModel)]="user.email">
          </td>
          <td>
            <button *ngIf="!user.editing" (click)="toggleEditing(user)">Edit</button>
            <button *ngIf="user.editing" (click)="saveChanges(user)">Save</button>
          </td>
        </tr>
      </tbody>
    </table>
  

Next, open the app.component.ts file and add the following code to define the logic for editing the table data:

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

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      users = [
        { name: 'John Doe', email: 'john@example.com', editing: false },
        { name: 'Jane Doe', email: 'jane@example.com', editing: false }
      ];

      toggleEditing(user) {
        user.editing = !user.editing;
      }

      saveChanges(user) {
        user.editing = false;
      }
    }
  

With this code, we have created a simple table with inline editing functionality. When the user clicks the “Edit” button, the table cells become editable, and when they click the “Save” button, the changes are saved and the cells become non-editable again.

Conclusion

Congratulations! You have successfully implemented inline table editing in Angular 15. In the next part of this tutorial series, we will explore more advanced features and customizations for inline table editing. Stay tuned!