title: angular 2 hide or show child component
body: <p>I have a "parent" component whose template includes two other components. I want to show or hide either component somehow. I looked at the <a href="https://angular.io/docs/ts/latest/tutorial/toh-pt3.html" rel="nofollow">multiple component angular.io tutorial</a> to try and figure this out but nothing is happening (and no console errors are coming up).</p>
  
  <p>My "parent" component with it's template is:</p>
  
  <pre><code>@Component({
      selector: 'main-area',
      templateUrl: 'main-area.html',
      directives: [Child1Component, Child2Component]
  })
  export class MainComponent {
          child1Shown:boolean = true;
          child2Shown:boolean = false;
  }
  </code></pre>
  
  <p>main-area.html - </p>
  
  <pre><code>&lt;div&gt;
      &lt;childOne [hidden]="child1Shown"&gt;&lt;/childOne&gt;
      &lt;childTwo [hidden]="child2Shown"&gt;&lt;/childTwo&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My child components each have a template but here are what the code looks like in them.</p>
  
  <p>Child1:</p>
  
  <pre><code>@Component({
      selector:'childOne',
      templateUrl: 'childOne.html'     
  })    
  
  export class Child1Component { 
     @Input() hidden:boolean;
  }
  </code></pre>
  
  <p>Child2:</p>
  
  <pre><code>@Component({
      selector: 'childTwo',
      templateUrl: 'childTwo.html'
  })
  
  export class Child2Component {
          @Input() hidden:boolean;
  }
  </code></pre>
  
  <p>When the page loads with it's <code>MainComponent</code> child2 should be hidden (with it's template) and child1 shown (with it's template). However both are being shown. I've tried creating a button with a <code>(click)=setHidden()</code> function on the MainComponent to change the MainComponent properties but nothing happens. What am I missing when it comes to the inter-component communication?</p>