Memento

The memento pattern is a really  useful pattern in the context of Angular. In Angular-powered applications, we use and overuse two ways 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 on the model.movies array and allow the user to edit it:

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