title: Update only selected array item in *ngFor array Angular2
body: <p>I have an *ngFor loop to display libraries. When you click on a library, categories of that library appear beneath in a tree-like structure. The categories are also being displayed with an *ngFor loop. When I have one library expanded and click on another one, the categories in BOTH libraries are updating to the categories in the library that was just clicked. The functionality I am looking for is to only update the selected library categories and leave the others alone. There is a post here that seems to be close to my problem but I couldn't get it to work. </p>
  
  <p><a href="https://stackoverflow.com/questions/35786054/using-ngfor-to-loop-through-an-array-and-ngif-to-select-which-elements-from-th">Using *ngFor to loop through an array and *ngIf to select which elements from the array to list</a></p>
  
  <p>Here is my code:</p>
  
  <p>library.component.html</p>
  
  <pre><code>&lt;div *ngFor="let messageLibrary of onHoldMessageLibraryService.data"  class="library mgn-top10 ft-size14"&gt;          
      &lt;a (click)="onHoldMessageLibraryService.getSelectedMessageLibrary(messageLibrary)"&gt;&lt;i class="fa fa-folder-o mgn-right10" aria-hidden="true"&gt;&lt;/i&gt;{{messageLibrary.Name}}&lt;/a&gt;
      &lt;library-category *ngIf="messageLibrary.treeIsExpanded" (displayMessagesFromSelectedCategory)="getOnHoldMessages()"&gt;&lt;/library-category&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>library.service</p>
  
  <pre><code>public treeIsExpanded: boolean;
  public selectMessages: boolean;
  public data: TreeData[];
  public selectedName: string;
  public selectedValue: number;
  
  
  public getSelectedMessageLibrary(messageLibrary): void {
       this.selectedMessagesLibrary = messageLibrary;
       this.selectedMessagesLibrary.treeIsExpanded = !this.selectedMessagesLibrary.treeIsExpanded;
     }
  
  
  
  public dummyData(): void {
      let myTree: TreeData[] = new Array();
      myTree.push(
      {
        Name: 'Banking Library',
        Id: 1,
        Category: [{
          Name: 'Credit Cards',
          Id: 11,
          Category: null
        }]
       },
      {
        Name: 'Automobile Library',
        Id: 2,
        Category: [{
          Name: 'Cars',
          Id: 12,
          Category: null
        }]
       },
      {
        Name: 'Coffee Library',
        Id: 3,
        Category: [{
          Name: 'Americano',
          Id: 13,
          Category: null
        }]
       }
      )
  
      this.data = myTree;
  
     }
  </code></pre>
  
  <p>library-category.component.html</p>
  
  <pre><code>&lt;ul *ngFor="let category of onHoldMessageLibraryService.selectedMessagesLibrary.Category"&gt;
      &lt;li&gt;&lt;i class="fa fa-folder-o mgn-right10" aria-hidden="true"&gt;&lt;/i&gt;{{category.Name}}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>tree-data.ts</p>
  
  <pre><code>export class TreeData {
  Name: string;
  Id: number;
  Category: TreeData[];
  </code></pre>
  
  <p>}</p>