Need a tutorial for ng2 Inline Editor


#1

Hi everyone! I’ve been on the slow track for using the Ionic framework for about a year now and finally I have some [at least a small] idea what I’m doing. However, I still need help, here and there.

I’d like to pay a developer to create a YouTube tutorial (and/or GitHub repository) that covers the details of utilizing Carlos Caballero’s ng2 Inline Editor within an ion-list.

If you’re interested, please tell me your terms. Although more experience is better, a working prototype is awesome. If we can help out the community - even more awesome.


#2

Hi there,

I am familiar with the requirements you have posted.

It would be highly appreciated if you can make one Skype call regarding the task which you want to accomplish with best quality with affordable price.

My rates are too Nominal and you will be delighted with the service.

I am looking forward for your kind attention.

Regards,
Anna J
Skype:cis.am2
anna.cis23@gmail.com


#3

Still need it? please add me to Skype (gedarufi@hotmail.com)


#4

Only handles input elements, but here’s a Q&D component that seems to work:

import {Component, EventEmitter, Input, Output} from "@angular/core";

@Component({
  selector: "inplace-input",
  templateUrl: "inplace-input.html",
})
export class InplaceInputComponent {
  @Input() value: string;
  newValue: string;
  @Output() valueChange = new EventEmitter<string>();
  editing: boolean;

  ngOnChanges(): void {
    this.newValue = this.value;
  }

  startEditing(): void {
    this.editing = true;
  }

  accept(): void {
    this.value = this.newValue;
    this.valueChange.emit(this.newValue);
    this.editing = false;
  }

  cancel(): void {
    this.newValue = this.value;
    this.editing = false;
  }
}

<button ion-item *ngIf="!editing" (click)="startEditing()">
  <ion-label>{{value}}</ion-label>
</button>
<ion-item *ngIf="editing">
  <ion-input [(ngModel)]="newValue"></ion-input>
  <div class="buttons" item-right>
    <button ion-button (click)="accept()">
      <ion-icon name="checkmark"></ion-icon>
    </button>
    <button ion-button (click)="cancel()">
      <ion-icon name="close"></ion-icon>
    </button>
  </div>
</ion-item>

Usage example:

<inplace-input [(value)]="fruit"></inplace-input>

The same basic technique should generalize pretty straightforwardly to other types (such as select). I think you’re better off rolling your own here instead of trying to jam in the library referenced in your OP, because it looks like it depends on Bootstrap’s CSS and therefore would probably seem out of place in an Ionic app.


Input with button in list