Expert Angular

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, ...