title: How do you refresh a component's template in Angular 2?
body: <p>I am completely new to Angular 2 (doing the Tour of Heroes tutorial now) and I created a component that has two-way data binding to an array of objects that are being displayed as a list in the template. I have wired a click event so that when a list item is clicked the object associated with the list item is stored as a property called selectedItem and a sub-component is called that shows the details of the selected item.  Typical master/detail stuff. </p>
  
  <p>However, instead of having the detail displayed on the click event, I want the list of items in the template reloaded with a new list of items.  I have a little service that knows how to get the new list that I want, but I can't figure out how to reload the component or refresh the template so that the new list of items are displayed.</p>
  
  <p>My object array looks like this: (scriptID, scriptName, scriptOrderID, scriptParentID).  Each object in the array has a scriptParentID that is the scriptID of another object in the array.  When I click on a list item, my new list is all the objects where their scriptParentID is the scriptID of the item clicked. </p>
  
  <p>So what I am after is a component that displays a list and then any time an item is clicked in the list, its children appear in the list.</p>
  
  <p>It's just a simple exercise to help learn state management, components, and templates, but I can't seem to figure it out. </p>
  
  <pre><code>&lt;ul class="heroes"&gt;
  &lt;li *ngFor="let script of scripts" [class.selected]="script === selectedScript" (click)="onSelect(script)"&gt;
    &lt;div class="container"&gt;
      &lt;div class="left"&gt;
        &lt;span class="badge"&gt;{{script.scriptOrderID}}&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="center"&gt;
        &lt;span&gt;{{script.scriptName}}&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="right"&gt;
        &lt;span class="badge2"&gt;{{script.scriptID}}&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>
  <code>&lt;my-script-detail [script]="selectedScript"&gt;&lt;/my-script-detail&gt;</code></p>
  
  <pre><code>export class AppComponent implements OnInit {
  scripts: Script[];
  selectedScript: Script;
  title = 'Sandbox';
  
  constructor(private scriptService: ScriptService) {}
  
  ngOnInit(): void {
     this.getScriptsByParentID(1);
   }
  
  onSelect(script: Script): void{
     this.selectedScript = script;
     this.getScriptsByParentID(script.scriptParentID);
   }
  
  getScriptsByParentID(parentID: number): void {
    this.scriptService.getScriptsByParentID(parentID).then(scripts =&gt; this.scripts = scripts);
    }
  }
  </code></pre>