Inline editing is a feature that allows users to edit table cells directly, without having to navigate to a separate page or modal. This feature can greatly enhance the user experience by allowing users to quickly and easily update data in a table. In this blog post, we will show you how to enable inline editing in an Angular Material table.
How to Enable Inline Editing in an Angular Material Table?
Step 1: Import the MatTableDataSource module
Step 2: Create a data source
Step 3: Define the columns
Step 4: Enable inline editing
Step 5: Add event listeners
Step 6: Apply the data source and columns to the table
Prerequisites
- Basic knowledge of Angular and Angular Material
- An Angular application with Angular Material installed
Step 1: Import the MatTableDataSource module
The first step is to import the MatTableDataSource module from the @angular/material library. This module is used to create a data source for the table and provides support for inline editing. Here is an example of how to import the module in a file called ‘app.module.ts’:
import { MatTableDataSource } from '@angular/material/table';
Step 2: Create a data source
Next, create a data source for the table using the MatTableDataSource module. The data source is an array of objects that represents the rows in the table. Here is an example of how to create a data source with two columns and three rows:
dataSource = new MatTableDataSource([
{id: 1, name: 'Item 1', price: 10},
{id: 2, name: 'Item 2', price: 20},
{id: 3, name: 'Item 3', price: 30},
]);
Step 3: Define the columns
In this step, you will define the columns of the table using the mat-header-cell and mat-cell directives. The mat-header-cell directive is used to define the column headers and the mat-cell directive is used to define the cells of the table. Here is an example of how to define two columns called ‘name’ and ‘price’:
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef> Price </th>
<td mat-cell *matCellDef="let element"> {{element.price}} </td>
</ng-container>
Step 4: Enable inline editing
To enable inline editing, you will need to use the ngIf and ngModel directives. The ngIf directive is used to conditionally display an input field when the user clicks on a table cell, and the ngModel directive is used to bind the input field to the data source. Here is an example of how to enable inline editing for the ‘name’ column:
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element">
<div *ngIf="!element.editing; else editingTemplate">
{{element.name}}
</div>
<ng-template #editingTemplate>
<input [(ngModel)]="element.name" (blur)="element.editing = false">
</ng-template>
</td>
</ng-container>In the above example, when the user clicks on a table cell in the ‘name’ column, the input field will be displayed and the user can edit the value of the ‘name’ property of the element. The [(ngModel)] directive binds the input field to the ‘name’ property of the element, and the (blur) directive sets the ‘editing’ property of the element to false when the input field loses focus.
Step 5: Add event listeners
To enable inline editing, you also need to add event listeners to the table cells that will toggle the ‘editing’ property of the element when clicked. Here is an example of how to add a click event listener to the ‘name’ column:
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element" (click)="element.editing = true">
<div *ngIf="!element.editing; else editingTemplate">
{{element.name}}
</div>
<ng-template #editingTemplate>
<input [(ngModel)]="element.name" (blur)="element.editing = false">
</ng-template>
</td>
</ng-container>
Step 6: Apply the data source and columns to the table
Finally, you need to apply the data source and columns to the table by using the mat-table directive and the mat-header-row and mat-row directives. Here is an example of how to apply the data source and columns to the table:
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="name"></ng-container>
<ng-container matColumnDef="price"></ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>In the above example, the mat-table directive is used to apply the data source to the table, and the mat-header-row and mat-row directives are used to apply the columns to the table. The displayedColumns variable should be an array of the column names.
Complete Code:
app.component.ts
import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
displayedColumns: string[] = ['name', 'price'];
dataSource = new MatTableDataSource([
{id: 1, name: 'Item 1', price: 10, editing: false},
{id: 2, name: 'Item 2', price: 20, editing: false},
{id: 3, name: 'Item 3', price: 30, editing: false},
]);
}
In the component class, we define the displayed columns and create a new data source using the MatTableDataSource module. We also added a new property called “editing” to the dataSource object.
app.component.html
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element" (click)="element.editing = true">
<div *ngIf="!element.editing; else editingTemplate">
{{element.name}}
</div>
<ng-template #editingTemplate>
<input [(ngModel)]="element.name" (blur)="element.editing = false">
</ng-template>
</td>
</ng-container>
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef> Price </th>
<td mat-cell *matCellDef="let element"> {{element.price}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>In the template file, we define the columns using the matColumnDef directive and add click event listener to the cells of the “name” column. We also added ngIf and ngModel to the “name” column’s cell to enable inline editing.
Conclusion
Inline editing can greatly enhance the user experience in a table by allowing users to quickly and easily update data. By following the steps outlined in this blog post, you can enable inline editing in an Angular Material table. Note that this is a basic example and you can further customize the functionality as per your requirement. You can add validation, error messages, add functionality to save the data, etc. It’s a good practice to test your application thoroughly after adding any new feature.
