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:
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:
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.
hope my article has been useful