Memento pattern

The memento pattern is a really-really useful pattern in the context of Angular. In Angular-powered applications, we use and overuse Two-way Data Binding between domain models such as User or Movie.

Let's consider two components: one named Dashboard and the other one named EditMovie. On the Dashboard component, you have a list of movies displayed in the context of our IMDB-like application. The view of such a dashboard could look like this:

<div *ngFor="let movie of model.movies"> 
   <p>{{movie.title}}</p> 
   <p>{{movie.year}}</p> 
</div> 

This simple view owns a ngFor directive that iterates over the list of movies contained in a model. Then, for each movie, it displays two p elements containing the title and the release year, respectively.

Now, the EditMovie components access one of the movies in the model.movies array and allow the user to edit it:

<form> 
   <input id="title" name="title" type="text" [(ngModel)]="movie.title"...