title: Master detail view in angular2?
body: <p>Edit: Figured it out. I moved all the html in the body of <code>index.html</code> to <code>app.component.ts</code> and everything worked fine. Below answer is correct method.</p>
  
  <p>My issue is that I have a ParentComponent which reads from a service, and posts the data to a sidebar. When you click an item in the sidebar it's supposed to post details about that parent in the main section of the page. Since it requires two different templates, I figured the solution is to use a parent-child relationship where the parent is the sidebar and the child is the detail part and I pass the data to the child to display. Does that sound right? Is there a better way to solve this? I've tried various methods but they all seem outdated as it uses <code>directives</code> which aren't in use any more.</p>
  
  <p>Edit: the other question is not the same because the answer references <code>directives</code> which were removed in rc6 release of angular2. This question is post-rc6.</p>
  
  <p>Edit 2: Added some code</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;header&gt;
    &lt;div class="content"&gt;This is a header&lt;/div&gt;
  &lt;/header&gt;
  &lt;div class="container"&gt;
      &lt;div class="sidebar"&gt;
        &lt;div class="content"&gt;
          &lt;parent-items&gt;&lt;/parent-items&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main-content"&gt;
        &lt;div class="content"&gt;
          &lt;my-app&gt;Loading...&lt;/my-app&gt;
          &lt;child-cmp [id]="selectedItem.id"&gt;&lt;/child-cmp&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>child-cmp.ts:</p>
  
  <pre><code>@Component({
    selector: 'child-cmp',
  })
  export class ChildComponent {
    @Input() set id(n) {
      this.getData(n)
    }
    getData(id: number): void {
       console.log('triggered');
    };
  }
  </code></pre>
  
  <p>parent.ts:</p>
  
  <pre><code>@Component({
    moduleId: module.id,
    selector: 'parent-items',
    templateUrl: `&lt;ul class="items"&gt;
        &lt;li *ngFor="let item of items"
            (click)="selectedItem = item"
            [class.selected]="item === selectedItem"&gt;{{item.name}}&lt;/li&gt;
        &lt;/ul&gt;`,
  })
  export class ItemsComponent implements OnInit {
    items: Item[];
    selectedItem: Item;
    constructor(private itemService: ItemService) {};
    getItems(): void {
      this.itemService
          .getItems()
          .then(items =&gt; this.items = items);
    }
    ngOnInit(): void {
      this.getItems();
    }
  }
  </code></pre>