angular 2 hide or show child component
<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>