10 New Angular 2 Inline Editors / Text Editors

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.

Code Demo

2. Angular Directives For Inline Editing

Angular-bs-edit is a set of AngularJS directives for inline editing in the Bootstrap style.

Code Demo

3. Linkedin-style Inline Editing with AngularJS – editme

Convert your AngularJS input and textarea elements to be edited inline ala LinkedIn profiles.

Demo

4. Codepen NG2 Inline Edit Example

An ng2 inline edit example. Check out demo to see how it works.

Demo

5. jsfiddle ng2 Edit Inline with Buttons

An example of ng2 edit inline with buttons.

Demo

6. Inline WYSIWYG Editor Demo

An example of Javascript rich text editor. Check out demos for examples and demonstrations.

Article Demo

References:

• The Hero Editor Article: https://angular.io/docs/ts/latest/tutorial/toh-pt1.html