I’ve been thinking of switching to using inline editing with angular2 and did some research on different inline editing components, particularly ones which work well with bootstrap 2. The list of mostly demos and examples which as you know are super essential to “working out” what it does and how it’s put together so hopefully it will help get you up and running inline editing with Angular2. Some features of ng2 are useful for editor interfaces such as to put it bluntly, there is no more scope…or controllers, everything is now a module.
There is demos for click-to-edit buttons which activate the inline-editor support on the DOM element on the fly which is nice. There is also the Inline WYSIWYG Editor Demo which has angular 2 support out of the box could be a good solution if you don’t have much time to code in one of the packages into your application structure/Angular application.
1. ng2 Inline Editor
ng2-inline-editor is a library of Angular2 that allows you to create editable elements. Such technique is also known as click-to-edit or edit-in-place. It is based on ideas of angular-xeditable which is developed in AngularJS.
2. Angular Directives For Inline Editing
Angular-bs-edit is a set of AngularJS directives for inline editing in the Bootstrap style.
3. Linkedin-style Inline Editing with AngularJS – editme
Convert your AngularJS input and textarea elements to be edited inline ala LinkedIn profiles.
4. Codepen NG2 Inline Edit Example
An ng2 inline edit example. Check out demo to see how it works.
5. jsfiddle ng2 Edit Inline with Buttons
An example of ng2 edit inline with buttons.
6. Inline WYSIWYG Editor Demo
- The Hero Editor Article: https://angular.io/docs/ts/latest/tutorial/toh-pt1.html