Angular 2 inline editor

Question

I am currently using angular 2 with typescript in my project. I have researched some inline editors for angularjs and found angular-xeditable. But this plugins is for angularjs 1.

Are there any way to use this with angular 2? Or another alternative like x-editable for angular 2

I want simply inline editor with edit button.

P.S i don't want js inline editor plugin for this which will not be a part of angular ( not angularjs module )

Answer 1

You can build your own component in Angular2 which do this function while wait for an official component.

Here is a full working example from this blog (https://medium.com/front-end-hacking/inline-editing-with-angular2-58b43cc2aba)

TypeScript file:

import {Component, Output, Provider, forwardRef, EventEmitter, ElementRef, ViewChild, Renderer} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/common";

const INLINE_EDIT_CONTROL_VALUE_ACCESSOR = new Provider(
    NG_VALUE_ACCESSOR, {
        useExisting: forwardRef(() => InlineEditComponent),
        multi: true
    });

@Component({
    selector: 'inline-edit',
    providers: [INLINE_EDIT_CONTROL_VALUE_ACCESSOR],
    styleUrls: ['./inline-edit.component.css'],
    templateUrl: './inline-edit.component.html'
})
export class InlineEditComponent implements ControlValueAccessor, ngOnInit{
    @ViewChild('inlineEditControl') inlineEditControl;
    @Output() public onSave:EventEmitter<any> = new EventEmitter();

    private _value:string = '';
    private preValue:string = '';
    private editing:boolean = false;

    public onChange:any = Function.prototype;
    public onTouched:any = Function.prototype;

    get value(): any { return this._value; };

    set value(v: any) {
        if (v !== this._value) {
            this._value = v;
            this.onChange(v);
        }
    }

    constructor(element: ElementRef, private _renderer:Renderer) {}

    // Required for ControlValueAccessor interface
    writeValue(value: any) {
        this._value = value;
    }

    // Required forControlValueAccessor interface
    public registerOnChange(fn:(_:any) => {}):void {this.onChange = fn;}

    // Required forControlValueAccessor interface
    public registerOnTouched(fn:() => {}):void {this.onTouched = fn;};

    edit(value){
        this.preValue = value;
        this.editing = true;

        setTimeout( _ => this._renderer.invokeElementMethod(this.inlineEditControl.nativeElement, 'focus', []));
    }

    onSubmit(value){
        this.onSave.emit(value);
        this.editing = false;
    }

    cancel(value:any){
        this._value = this.preValue;
        this.editing = false;
    }

HTML file:

<div id="inlineEditWrapper">

    <!-- Editable value -->
    <a (click)="edit(value)" [hidden]="editing">{{ value }}</a>

    <!-- inline edit form -->
    <form  #inlineEditForm="ngForm" class="inlineEditForm form-inline" (ngSubmit)="onSubmit(value)" [hidden]="!editing">
        <div class="form-group">

            <!-- inline edit control  -->
           <input #inlineEditControl class="form-control" [(ngModel)]="value"/>

            <!-- inline edit save and cancel buttons -->
           <span>
                <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-ok"></span></button>
                <button class="btn btn-default" (click)="cancel(value)"><span class="glyphicon glyphicon-remove"></span></button>
           </span>

        </div>
    </form>
</div>

Update 10/08/2016

I just of published in GitHub a basic library to edit-inline in angular2 based in the above code which include an example with input of the types: text, textarea, password and select (https://github.com/Caballerog/ng2-inline-editor).