Creating a table with inline editable cells using Angular 6


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  scafold 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 conent with below:

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

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:

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

Ramin Ahmadi
I am a full-stack front end developer with over 5 years experience in web design and development. I have worked with a wide variety of environments and languages including Angular, TypeScript, NodeJS, Restful API, Microservices, Atomic design, JQuery, Material design, Progressive Web Apps, DevOps, and many Azure tools. I make it a goal to automate myself out of routine tasks in my daily work. My motto is, ‘write human readable code, lean and clean’.

Comments 0

Your email address will not be published. Required fields are marked *

Creating a table with inline editable cells using Angular 6

log in

Captcha!

reset password

Back to
log in
Choose A Format
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
List
The Classic Internet Listicles
Image
Photo or GIF
Gif
GIF format