title: angular 2 - tree view expanding all nodes how to make it expand only child
body: <p>I have json file as below </p>
  
  <pre><code>{
      "transactions": [{
          "Transaction ref : 321916010424": {
              "request": [{
                  "Field": "DE-000",
                  "length": "004",
                  "value": "0100"
              }, {
                  "Field": "DE-001",
                  "length": "016",
                  "value": "11110010 00111100 01000100 10000001 10001000 11100001 10000000 00001000                       00000000 00000000 00000000 00000000 00000000 00000000 00000001 11000000 "
              }],
              "response": [{
                  "Field": "DE-000",
                  "length": "004",
                  "value": "0110"
              }, {
                  "Field": "DE-001",
                  "length": "008",
                  "value": "00110010 00111010 00000000 00000000 00001110 11000001 10000000 00000010 "
              }, {
                  "Field": "DE-003",
                  "length": "006",
                  "value": "003000"
              }]
          }
      }, {
          "Transaction ref : 000463000046": {
              "request": [{
                  "Field": "DE-000",
                  "length": "004",
                  "value": "0100"
              }, {
                  "Field": "DE-001",
                  "length": "016",
                  "value": "11110010 00111100 01000100 10000001 10101000 11100001 10000010 00001000                       00000000 00000000 00000000 00000000 00000000 00000000 00000001 00000000 "
              }],
              "response": [{
                  "Field": "DE-000",
                  "length": "004",
                  "value": "0110"
              }, {
                  "Field": "DE-001",
                  "length": "008",
                  "value": "00110010 00111010 00000000 00000000 00001110 11000001 10000000 00000010 "
              }, {
                  "Field": "DE-063",
                  "length": "009",
                  "value": "AMXHZGWJ7"
              }]
          }
      }]
  }
  </code></pre>
  
  <p>my html file is </p>
  
  <pre><code>&lt;ul  style="border: none" class="list-unstyled"&gt;
    &lt;li *ngFor="let a of acquirer_response | keys "&gt;
      &lt;ul class="list-unstyled" &gt;
        &lt;li *ngFor="let b of a.value | keys "&gt;
          &lt;ul class="list-unstyled"&gt;
            &lt;li *ngFor="let c of b.value | keys " class="list-group"&gt;
              &lt;strong  (click)="isCollapsedContent = !isCollapsedContent"&gt;
                &lt;span class="glyphicon glyphicon-plus-sign"&gt;&lt;/span&gt;
                {{c.key}}&lt;/strong&gt;
  
              &lt;ul class="list-unstyled" *ngIf="isCollapsedContent"&gt;
                &lt;li *ngFor="let d of c.value | keys " class ="list-group-item list-group-item-info" (click)="isCollapsedContent = !isCollapsedContent"  &gt;
                  &lt;strong&gt;
                    &lt;span class="glyphicon glyphicon-plus-sign"&gt;&lt;/span&gt;
                    {{d.key}}&lt;/strong&gt;
  
                  &lt;ul class="list-unstyled" *ngIf="isCollapsedContent"&gt;
                    &lt;li *ngFor="let e of d.value | keys " class ="list-group-item list-group-item-info"&gt;
                      &lt;ul class="list-unstyled" (click)="isCollapsedContent = !isCollapsedContent" &gt;
                        &lt;li *ngFor="let f of e.value | keys " class ="list-group-item list-group-item-info"  &gt;
                          {{f.value}}
                      &lt;/ul&gt;
  
                    &lt;/li&gt;
                  &lt;/ul&gt;
  
                &lt;/li&gt;
              &lt;/ul&gt;
  
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  
  
  import {Directive, Input, HostBinding} from '@angular/core';
  
  
  @Directive({selector: '[collapse]'})
  export class Collapse {
    // style
    @HostBinding('style.height')
    private height:string;
    // shown
    @HostBinding('class.in')
    @HostBinding('attr.aria-expanded')
    private isExpanded:boolean = true;
    // hidden
    @HostBinding('attr.aria-hidden')
    private isCollapsed:boolean = false;
    // stale state
    @HostBinding('class.collapse')
    private isCollapse:boolean = true;
    // animation state
    @HostBinding('class.collapsing')
    private isCollapsing:boolean = false;
  
    @Input()
    private set collapse(value:boolean) {
      this.isExpanded = value;
      this.toggle();
    }
  
    private get collapse():boolean {
      return this.isExpanded;
    }
  
    constructor() {
    }
  
    toggle() {
      if (this.isExpanded) {
  
  
        this.hide();
      } else {
        this.show();
      }
    }
  
    hide() {
      this.isCollapse = false;
      this.isCollapsing = true;
  
      this.isExpanded = false;
      this.isCollapsed = true;
      setTimeout(() =&gt; {
        this.height = '0';
        this.isCollapse = true;
        this.isCollapsing = false;
      }, 4);
    }
  
    show() {
      this.isCollapse = false;
      this.isCollapsing = true;
  
      this.isExpanded = true;
      this.isCollapsed = false;
      setTimeout(() =&gt; {
        this.height = 'auto';
  
        this.isCollapse = true;
        this.isCollapsing = false;
      }, 4);
    }
  }
  </code></pre>
  
  <p>now I got the tree structure as expected like this </p>
  
  <pre><code>+ Transaction ref : 321916010424
  
  + Transaction ref : 000463000046
  </code></pre>
  
  <p>but when i click + Transaction ref : 321916010424 it expands all the items including the next transaction ref items and child nodes . the same is happening when i try to expand child node. pls help how can restrict the expand and collapse for a particular node only.</p>
  
  <p>collapse component file </p>
  
  <pre><code>import {Directive, Input, HostBinding} from '@angular/core';
  
  
  @Directive({selector: '[collapse]'})
  export class Collapse {
    // style
    @HostBinding('style.height')
    private height:string;
    // shown
    @HostBinding('class.in')
    @HostBinding('attr.aria-expanded')
    private isExpanded:boolean = true;
    // hidden
    @HostBinding('attr.aria-hidden')
    private isCollapsed:boolean = false;
    // stale state
    @HostBinding('class.collapse')
    private isCollapse:boolean = true;
    // animation state
    @HostBinding('class.collapsing')
    private isCollapsing:boolean = false;
  
    @Input()
    private set collapse(value:boolean) {
      this.isExpanded = value;
      this.toggle();
    }
  
    private get collapse():boolean {
      return this.isExpanded;
    }
  
    constructor() {
    }
  
    toggle() {
      if (this.isExpanded) {
  
  
        this.hide();
      } else {
        this.show();
      }
    }
  
    hide() {
      this.isCollapse = false;
      this.isCollapsing = true;
  
      this.isExpanded = false;
      this.isCollapsed = true;
      setTimeout(() =&gt; {
        this.height = '0';
        this.isCollapse = true;
        this.isCollapsing = false;
      }, 4);
    }
  
    show() {
      this.isCollapse = false;
      this.isCollapsing = true;
  
      this.isExpanded = true;
      this.isCollapsed = false;
      setTimeout(() =&gt; {
        this.height = 'auto';
  
        this.isCollapse = true;
        this.isCollapsing = false;
      }, 4);
    }
  }
  </code></pre>