Ramin Ahmadi | Personal website of Ramin Ahmadi

Creating a table with inline editable cells using Angular 6

in this article, I’m going to discuss how to create a table with inline editable cells. As a developer, you have been asked to present one view for presentation and edit of content because of user experience requirements. Recently I have been working on a component that does that and I have extended my component in to a table. As a freelance UX designer for a project, I have introduced a table with inline editable cells and took the challenge to develop that.
what I am I going to work with? Well, I’m going to use Angular 6 and TypeScript to develop the component and use Angular CLI to scaffold the application.

ng new inline-edit-app — style=scss

for styling purposes I’m using BootStrap here but you may use any other CSS framework. In order to have BootStrap use below command:

npm install bootstrap --save

now CD to your application directory with:

cd inline-edit-app

We need to create inline edit as a component because as a component we’d be able to reuse it later in the table. But first we need a component folder at app directory. After creating it, use below command to create the component.

ng g component inline-edit

Above command creates following fies in your component folder:

  1. inline-edit.component.html
  2. inline-edit.component.scss
  3. inline-edit.component.spec.ts
  4. inline-edit.component.ts

In our brand new component, we simply want a container that shows a link with some content and after clicking on the link, we want to simply show an input to get new text. After the input has lost focus (by clicking outside of input or using tab), we want the link to be updated with the new text. now lets open “inline-edit.component.html” file with your IDE and replace the content with below:

<div>
<div *ngIf="editing">
<input [required]="required" (blur)="onBlur($event)" [name]="value" [(ngModel)]="value" [placeholder]="label" />
</div>
<div *ngIf="!editing">
<a href="#" (click)="beginEdit(value)" (focus)="beginEdit(value)" tabindex="0">{{value}}</a>
</div>
</div>

Now it’s time to add logic to our UI. Open “inline-edit.component.ts” file and replace the content with below code.

import { Component, Input, ViewChild,Renderer,forwardRef } from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

const VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InlineEditComponent),
multi: true
};

@Component({
selector: 'app-inline-edit',
templateUrl: './inline-edit.component.html',
providers: [VALUE_ACCESSOR],
styleUrls: ['./inline-edit.component.scss']
})

export class InlineEditComponent implements ControlValueAccessor{
@Input() label: string = "Enter value here";
@Input() required: boolean = true;
private _value: string = '';
private preValue: string = '';
private editing: boolean = false;
public onChange: any = Function.prototype;
public onTouched: any = Function.prototype;

get value(): any {
return this._value;
}

set value(v: any) {
if (v !== this._value) {
this._value = v;
this.onChange(v);
}
}

writeValue(value: any) {
this._value = value;
}

public registerOnChange(fn: (_: any) => {}): void {
this.onChange = fn;
}

public registerOnTouched(fn: () => {}): void {
this.onTouched = fn;
}

onBlur($event: Event) {
this.editing = false;
if ( this._value ==""){
this._value = "No value available";
}
}

beginEdit(value) {
this.preValue = value;
this.editing = true;
}
}

Where label holds text for placeholder and required is an attribute that applies required validation for the input.

Next step is to include the coponent inside a table cell. So lets go back to “app.component.html” in app folder and add the following into it:

<iframe src=”https://stackblitz.com/github/ramin-ahmadi/inline-edit-app?file=src%2Fapp%2Fapp.component.html" width=”100%” height=”450px”></iframe>

Congratulation, now you should be able to see the app presenting a table with two columns that contain inline editable cells.

To download the app completely, have a look at my repo at Github or see how it works on StackBlitz.

hope my article has been useful

Leave a Comment.