Managing state is one of the hardest things to do in any application. Angular 2 tackles this problem by making it easy to implement a reactive, uni-directional data flow that favor immutable operations. We are moving in the right direction in Angular 1 by moving our state and logic to models but invariably this raises a question. If we are moving to an immutable world, how do you manage mutable operations like forms in Angular? In this lesson, we are going to learn a surprisingly simple technique to isolate state mutations within a component using component lifecycle hooks.

 

For example you have a bookmark component, and inside the component, you want to update the bookmark. The solution is you create a component just for update bookmark.

     
    
      
        
       ×        
                                   
       {
   {bookmark.title}}    
      
    
      
        
                               Create Bookmark            
      
    
          
      
     

 

And inside the save-bookmark component, you can copy the original data, and modify on the copy data:

class SaveController {  $onChanges() {    this.editedBookmark = Object.assign({}, this.bookmark);  }}export default SaveController;

This can isolate the component state muataion.