Angular is built around the idea of components, and prominently with the web components standard in mind. Angular gives a cutting edge to the web applications using the default features it offers for achieving the best execution. Additionally, it allows you to logically design and arranges your application in components instead of controllers. Creating a library for extremely generic components which are used throughout an application makes sense when you consider reusability, versioning, separate maintainability or even making it public to support the community. These are the reasons why Angular has a Component Library for web applications where you can include components and generic controls which you can reuse relatively often throughout the web application. Inline editor is one such library of Angular.
Read More: 9 Ideas For Angular That Are Often Overlooked by Developers
Inline editor is a library of Angular that allows you to create editable components. Such technique is also known as edit-in-place or click-to-edit. Inline edit allows the user to edit text directly on the page without requiring going to a different page. It makes the interaction more direct and built-in as the users can edit the text in the same place where it appears. It allows users to select portions of rich text that they wish to edit in a webpage, rather than loading a specific new page.
For creating general inline editing components in your web application you can refer the steps given below:
Create common component for editable textbox using given code. For that, you need to customize control by specifying required validated input values of min length, max length.
In the given code, you need to specify that when detail label is converted into control, you have to define Click event. By using this Click event outside of Control you can convert editable view into detail view.
You are creating general inline editing control so once you click on submit you have to transmit event into parent component by using updateValue output parameter and for passing control value to parent component you can use the abstraction of Angular EventEmitter.
By using below code you can create common component for editable drop-down
Here you need to pass updateValue output parameter in which you are assigning saveDetail named function. So once updateValue parameter is transmitted from the control, saveDetail function will be called.
WRITTEN BY: Parth Patel
Parth Patel is a Microsoft Certified Solution Associate (MCSA) and DotNet Team Lead at CMARIX, a leading Asp.net mvc development company. With 10+ years of…
FEW MORE POSTS BY Parth Patel: