Angular2 Inline editing using ngModel and ngFor

Question

I'm trying to implement inline editing using ngModel in Angular2. I have an array which needs to be iterated using ngFor and also uses ngModel. When i try to apply inline editing for this array, i can only edit one character for each of the array's variables.

You can find a working example here.

Here's the code for the component where i'm using ngModel and ngFor together:

import {Component} from '@angular/core'
import {InlineEditComponent} from './inline.component';
@Component({
  selector: 'inline-app',
  providers: [],
  template: `
    <div>
      <h2>Inline Editing with Angular 2</h2>
      <inline-edit [(ngModel)]="editableText" (onSave)="saveEditable($event)"></inline-edit>
    </div>
    <div>
      <ul style="margin:5px;">
      <li ngFor #arr [ngForOf]="array" [ngForTrackBy]="customTrackBy">
      <inline-edit [(ngModel)]="arr" (onSave)="saveEditable($event)"></inline-edit>
   </li>
        // <li style="margin:5px;" *ngFor="let arr of array ; let i=index">
        //   <inline-edit [(ngModel)]="array[i]" (onSave)="saveEditable($event)"></inline-edit>
        // </li>
      </ul>
    </div>
  `,
  directives: [InlineEditComponent]
})
export class InlineApp {
customTrackBy(index: number, obj: any): any {
    return index;
  }
  editableText = "Click to edit me!";
  // Save name to the server here.  
  saveEditable(value){
      console.log(value);
  }
  array=['bmw','benz','honda'];
}

If anyone could help me, it would be great.

Harry Ninh · Accepted Answer · 2016-07-06 01:42:02Z

2

You are editing the strings that are both immutable and direct elements of the array. That means whenever the string value changes, a new string object will be created and replace the old string in array, which in turn causes *ngFor to re-initiate new component for that string to replace the old one. If you put console.log('on-constructor') in the InlineEditComponent's constructor, you will see it's called every time you add a character.

To fix your problem, don't use string directly. Wrap them within a class like this:

export class Data {
  name: string;
}

then your array declaration will be:

array: Data[] = [
  {name:"bwm"},
  {name:"benz"},
  {name:"honda"}
];

With this, the changes will only affect name field, and wrapper objects are still the same; ngFor therefore will not be triggered to re-run.

Modified plnkr: https://plnkr.co/edit/WwGcLlisjGe1cmZOMHhD?p=preview

answered Jul 6, 2016 at 1:42

Harry Ninh

16.8k5 gold badges64 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jarod Moser Over a year ago

I had thought that was what was going on with @Varun's problem... your solution is pretty good however the action of cancelling no longer cancels... it still saves any changes that were made

Harry Ninh Over a year ago

Yea I didn't do sanity check to all the other functions, should've put a warning there. My changes were purely to solve the problem he's having :)

BrianRT Over a year ago

In essence his solution involves making a model--the Data class. That's the recommended way to go when implementing any repeatable data object.

Varun Over a year ago

Thanks for the answer, but i posted a general answer which can be used for any list. The working code : plnkr.co/edit/7SSpZDec2N2zjrSUM04X?p=preview . @HarryNinh

Günter Zöchbauer · Accepted Answer · 2016-07-06 05:00:35Z

0

You can bind directly to the array item instead of to the template variable:

<li *ngFor="let arr of array; let idx=index; ngForTrackBy:customTrackBy">
      <inline-edit [(ngModel)]="array[i]" (onSave)="saveEditable($event)"></inline-edit>

Btw: your ngFor syntax can only be used on <template> tags. If you use it on other elements the syntax used above is necessary.

See also https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngFor

answered Jul 6, 2016 at 5:00

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Comments

Varun · Accepted Answer · 2016-07-06 19:00:30Z

0

This should be modified in the tamplate.

<ul>
            <li style="margin:5px;" *ngFor="let arr of array ; let i=index; trackBy:customTrackBy">
            <inline-edit [(ngModel)]="array[i]" (onSave)="saveEditable($event)"></inline-edit>
            </li>
</ul>

This functions should be added in the class:

export class{

customTrackBy(index: number): any {
    return index;
  }
}

The final working code:
https://plnkr.co/edit/7SSpZDec2N2zjrSUM04X?p=preview

answered Jul 6, 2016 at 19:00

Varun

3,7556 gold badges25 silver badges34 bronze badges

Collectives™ on Stack Overflow

Angular2 Inline editing using ngModel and ngFor

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related