title: How to show/hide element in *ngFor array, without touching this Array?
body: <p>1.Hello.There are a lot of answers how to show/hide element, attaching to each element of iterated array an property which we change on true/false.</p>
  
  <pre><code> &lt;button  (click)="attachmentHide = !attachmentHide"&gt;&lt;/button&gt;
  &lt;itemComp [itemsArray]='item.children' class="col-sm-offset-1 subItemHiden" [class.subItemsShow] = 'showSubItem'&gt;&lt;/itemComp&gt;
  </code></pre>
  
  <p>so every time when we list each element of array it creates item.showSubItem property. In this case our array has been changed.</p>
  
  <p>But what to do if i want show/hide this items, but WITHOUT editing main array.It's important because I check this array for equal at the begining.
  there was answer to create a var which is not related to array, but how to create var for every element to show/hide every element separately? </p>
  
  <p><strong>update:</strong></p>
  
  <pre><code>&lt;div class="row col-sm-offset-1"  *ngFor="let item of itemsArray"&gt;
      &lt;div class="col-sm-4"&gt;
          &lt;div class="row assignedItem"&gt;
              &lt;span class="glyphicon glyphicon-plus-sign " title="sub items"  (click)= "showSubItem = !showSubItem"&gt;&lt;/span&gt;
  
              &lt;div class=" itemName" title="State:{{item.state}},Type: {{item.type}}"&gt;{{item.name}}&lt;/div&gt;
              &lt;!--users component--&gt;
  
          &lt;!--show subItems--&gt;
          &lt;itemComp [itemsArray]='item.children' class="col-sm-offset-1 subItemHiden" [class.subItemsShow] = 'showSubItem'&gt;&lt;/itemComp&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>ts file:</p>
  
  <pre><code>export class ItemComponent {
  @Input() itemsArray: Array&lt;Object&gt;;
  
  constructor () {}
  }
  </code></pre>
  
  <p><strong>update 2:</strong></p>
  
  <p>I've initialised array with i=false in home.ts:</p>
  
  <pre><code>viewNodes(result) {
      setTimeout(() =&gt; {
          this.myRes =  result;
          this.showSubItemsArr = this.myRes.content.map(i =&gt; false);
          this.itemsParentArray = this.myRes.content;
          console.log( this.showSubItemsArr );
          this.showAssigned = true;
      }, 3000);
  }
  </code></pre>
  
  <p>after I sent it to child component, in html:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;!--show item--&gt;
      &lt;itemComp [showSubItems]="showSubItemsArr" [itemsArray]='itemsParentArray'  &gt;&lt;/itemComp&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>than I try to view items with showSubItems[idx]. </p>
  
  <pre><code>    &lt;div class="row col-sm-offset-1"  *ngFor="let item of itemsArray let idx=index"&gt;
      &lt;div class="col-sm-4"&gt;
          &lt;div class="row assignedItem"&gt;
              &lt;span class="glyphicon glyphicon-plus-sign " title="sub items"  (click)= "showSubItem = !showSubItem"&gt;&lt;/span&gt;
              &lt;span class="glyphicon glyphicon-paperclip" title="attached docs" (click)="attachmentHide = !attachmentHide"&gt;&lt;/span&gt;
              &lt;div class=" itemName" title="State:{{item.state}},Type: {{item.type}}"&gt;{{item.name}}&lt;/div&gt;
              &lt;!--users component--&gt;
              &lt;usersComp [userArray]="item.assignment"&gt;&lt;/usersComp&gt;
          &lt;/div&gt; {{showSubItems}}
          &lt;!--attachment component--&gt;
          &lt;attachmentComp class="col-sm-offset-1" [attachmentsArray]='item.attachments' *ngIf="attachmentHide"&gt;&lt;/attachmentComp&gt;
          &lt;!--show subItems--&gt;
          &lt;itemComp [itemsArray]='item.children' class="col-sm-offset-1 subItemHiden" [class.subItemsShow] = 'showSubItems[idx]'&gt;&lt;/itemComp&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But it show error: </p>
  
  <blockquote>
    <p>TypeError: Cannot read property '0' of undefined</p>
  </blockquote>
  
  <p>but when I render all <code>{{showSubItems}}</code> array it displays <code>false,false,false</code> without problems.</p>
  
  <p>It seams like <code>idx</code> value is not ready for second iteration. Sorry can't use plunker( working on it).</p>