Angular2 - restore previous value on cancel in two-way data binding

Viewed 7599

In two-way data binding what if user decides to cancel the current edits? How can this be achieved in angular 2?

Consider the following piece of code:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `Name: {{ name  }}<br>
    <input *ngIf='editMode' type="text" [(ngModel)]='name' /><br>
    <button *ngIf='!editMode' (click)='editMode = !editMode' >Edit</button>
    <button *ngIf='editMode' (click)='editMode = !editMode' >Save</button><br>
    <button *ngIf='editMode' (click)='editMode = !editMode' >Cancel</button>`
})
export class AppComponent {
  public name = 'Essa';
  public editMode false;
}

I want the old value to be restored when the user presses the cancel button.

Here is the plunker as an example.

1 Answers
Related