title: Angular 2 How to store items in memory
body: <p>I'm learning AngularJS2 and following the My Hero tutorial in their site I'm building an app and I'm trying to understand how to store items in memory.</p>
  
  <p>This is my component:</p>
  
  <pre><code>@Component({
    selector: 'my-warehouse',
    templateUrl: 'templates/warehouse.component.html',
    styleUrls:  ['css/warehouse.component.min.css']
  })
  export class WarehouseComponent {
  
      ingredients: Ingredient[] = [
          {"id": 100, "name": "Milk", "description": "White and delicious.", "quality": 0, "price": 10, "quantity": 20},
          {"id": 101, "name": "Cocoa", "description": "Ready to be processed into sweet chocolate.", "quality": 0, "price": 20, "quantity": 50},
          {"id": 102, "name": "Sugar", "description": "The magic behind the choco.", "quality": 0, "price": 5, "quantity": 10}
      ];
  
      constructor(
          private _router: Router,
          private _ingredientService: IngredientService){
      }
  
      addIngredient(){
  
          var ingr = jQuery.extend({}, this._ingredientService.getIngredient(104));
          ingr.quantity = 15;
          ingr.quality = 0;
  
          this.ingredients.push(ingr);
      }
  
  }
  </code></pre>
  
  <p>I have an array called <code>ingredients</code> with some ingredients already constructed and when i use addIngredient() I get another ingredient from the service and push it to the array.</p>
  
  <p>The issue is that everytime I switch Components and go back to the Warehouse component the ingredient list is reseted, like if the array was never modified even if the ingredient list is outside the constructor.</p>
  
  <p>Am I doing something wrong? The docs are not very clear regarding this and I would appreciate some help.</p>
  
  <p>Thanks</p>