title: Angular 2 hide textarea which the user unchecked
body: <p>How can I hide a <code>textarea</code> when I unchecked a <code>checkbox</code> when the <code>textarea</code> is being rendered in <code>*ngFor</code>? So the checkbox should be bind with the textarea, right? It should only hide the <code>textarea</code> which the user unchecked and the others should stay visible.</p>
  
  <p>I've been trying to figure out the easiest way of doing it though in my actual code its returning me <code>true</code> if the boxed is ticked and <code>false</code> if it's not, however it not hiding the <code>textarea</code> at all. The default value is true so it shows all the textarea as default.</p>
  
  <p>For some reason this plnkr doesn't allow me use <code>[(ngMode)]</code> I think its a different RC of angular, but the example below is basically the problem I have when you uncheck the box it doesn't hide the textarea.</p>
  
  <p><a href="http://plnkr.co/edit/tOdtcmWxFB6vGuLyCqZS?p=preview" rel="nofollow">http://plnkr.co/edit/tOdtcmWxFB6vGuLyCqZS?p=preview</a></p>
  
  <p>My original code:</p>
  
  <pre><code>&lt;label for="inputSearch.name" style="float: left;"&gt;
      &lt;input  type="checkbox" id="{{inputSearch.name}}" [checked]="chkProp" (click)="chkboxCookie()" [(ngModel)]="inputSearch.value"&gt; {{inputSearch.name}}
   &lt;/label&gt;
  
  &lt;div class="" *ngFor="let inputSearch of searchBoxCount" class="col-sm-12"&gt;
      &lt;textarea name="{{inputSearch.name}}" id="{{inputSearch.name}}" rows="3" class="search-area-txt" attr.placeholder="Search {{inputSearch.name}}"  [(ngModel)]="inputSearch.value" *ngIf="chkProp || chkProp==true || inputSearch.name"&gt;&lt;/textarea&gt;
      &lt;p&gt; {{inputSearch.name}} - {{inputSearch.value}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>