title: Refresh a ListView adding new elements on runtime in NativeScript and Angular
body: <p>I'm building a ListView based component, similar to the groceries example in the {N} page. I have a "+" button, that needs to add new items to the list, I have this code:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
      moduleId: module.id,
      selector: 'my-list',
      templateUrl: 'my-list.component.html'
  })
  export class ListComponent implements OnInit {
      private myList: CustomObject;
      constructor() { }
  
      ngOnInit() { }
  
      addItem(){
          this.myList.push(new CustomObject());
      }
  
  }
  </code></pre>
  
  <p>And here is the template:</p>
  
  <pre><code>&lt;StackLayout&gt;
      &lt;Button text="+" (tap)="addItem()" &gt;&lt;/Button&gt;
      &lt;ListView [items]="myList"&gt;
          &lt;template let-item="item" let-i="i"&gt;
              &lt;Label text="item.name"&gt;&lt;/Label&gt;
          &lt;/template&gt;
      &lt;/ListView&gt;
  &lt;/StackLayout&gt;
  </code></pre>
  
  <p>My problem is, when I click on the "+" button, I get an undescifrable exception. When I fill the list with code, no problem, but I need the user can add new elements to the view. How is the correct way to implement a dynamic ListView like I described?</p>
  
  <p>EDIT:</p>
  
  <blockquote>
    <p>An uncaught Exception ocurred on "main" thread.
    com.tns.NativeScriptException: Calling js method getView failded</p>
    
    <p>Error No suitable views found in list template! Nesting level:0 File:
    "/data/data/org.nativescript.MyApp/files/app/tns_moudules/nativescript-angular/directives/list-view-comp.js,
    line:135 column:8</p>
    
    <p>StackTrace: Frame: function:'getSingleViewRecursive', file:....</p>
  </blockquote>