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.