title: Angular 2 stateless or stateful?
body: <p>So here is my problem. I have this component here which edits a contact passed through the input. This code works and the contact parameters are changed when i change something in the input text ( two way databinding ) and then "saved" when a hit save and route to another component ( which displays a list of all contacts ).</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {Contact} from "./contact";
  import {Router} from "angular2/src/router/router";
  import {OnInit} from "angular2/src/core/linker/interfaces";
  import {ContactService} from "./contacts.service";
  
  @Component({
      selector:'editor',
      template:`
      &lt;div class='editor'&gt;
          &lt;label&gt;Edit name : &lt;/label&gt;&lt;input type="text" [(ngModel)]="contact.name"&gt;
          &lt;br&gt;
          &lt;label&gt;Edit email : &lt;/label&gt;&lt;input type="text" [(ngModel)]="contact.email"&gt;
          &lt;br&gt;
          &lt;label&gt;Edit phone number: &lt;/label&gt;&lt;input type="text" [(ngModel)]="contact.phone"&gt;
          &lt;br&gt;
          &lt;div class="description"&gt;
          Description: 
          &lt;br&gt;
          &lt;textarea rows="4" cols="50" [(ngModel)]="contact.description"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;input type="button" (click)="onCreateContact()" class="button" value="Save Changes"/&gt;
      &lt;/div&gt;
  `,
      inputs:["contact"],
      styles:[
        `
          label {
            display: inline-block;
            width: 145px;
            border-left: 3px solid #006ec3;
            padding-left: 8px;
            padding-bottom: 8px;
          }
          .description{
  
            border-left: 3px solid #006ec3;
            padding-left: 8px;
            padding-bottom: 8px;
          }
        `
      ]
  })
  
  export class ContactEditorComponent implements OnInit{
  
      public contact:Contact;
  
      constructor(private router:Router){
  
      }
  
      onCreateContact(){
        this.router.navigate(['Contacts']);
      }
  
  }
  </code></pre>
  
  <p>Now if i change my class this way by adding a <code>temp:Contact</code> variable which takes a clone of my contact , changing the temp variable then cloning it to the contact object , the changes are not saved anymore when i hit the button.</p>
  
  <pre><code>@Component({
      selector:'editor',
      template:`
      &lt;div class='editor'&gt;
          &lt;label&gt;Edit name : &lt;/label&gt;&lt;input type="text" [(ngModel)]="temp.name"&gt;
          &lt;br&gt;
          &lt;label&gt;Edit email : &lt;/label&gt;&lt;input type="text" [(ngModel)]="temp.email"&gt;
          &lt;br&gt;
          &lt;label&gt;Edit phone number: &lt;/label&gt;&lt;input type="text" [(ngModel)]="temp.phone"&gt;
          &lt;br&gt;
          &lt;div class="description"&gt;
          Description: 
          &lt;br&gt;
          &lt;textarea rows="4" cols="50" [(ngModel)]="temp.description"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;input type="button" (click)="onCreateContact()" class="button" value="Save Changes"/&gt;
      &lt;/div&gt;
  `,
      inputs:["contact"],
      styles:[
        `
          label {
            display: inline-block;
            width: 145px;
            border-left: 3px solid #006ec3;
            padding-left: 8px;
            padding-bottom: 8px;
          }
          .description{
  
            border-left: 3px solid #006ec3;
            padding-left: 8px;
            padding-bottom: 8px;
          }
        `
      ]
      }) 
  
  export class ContactEditorComponent implements OnInit{
  
      public contact:Contact;
      public temp:Contact;
      constructor(private router:Router){
  
      }
  
      onCreateContact(){
        this.contact = (&lt;any&gt;Object).assign({}, this.temp);
        console.log(this.contact.name);
        this.router.navigate(['Contacts']);
      }
  
    ngOnInit(){
        this.temp = (&lt;any&gt;Object).assign({}, this.contact);
    }
  }
  </code></pre>
  
  <p>All my contacts are saved in another file containing a Const array of contacts and accessed through a contact.service.</p>