angular 2 - tree view expanding all nodes how to make it expand only child

Question

I have json file as below

{
    "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"
            }]
        }
    }]
}

my html file is


  
    
      
        
          
            
              
              {{c.key}}

            
              
                
                  
                  {{d.key}}

                
                  
                    
                      
                        {{f.value}}
                    

                  
                

              
            

          
        
      
    
  




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(() => {
      this.height = '0';
      this.isCollapse = true;
      this.isCollapsing = false;
    }, 4);
  }

  show() {
    this.isCollapse = false;
    this.isCollapsing = true;

    this.isExpanded = true;
    this.isCollapsed = false;
    setTimeout(() => {
      this.height = 'auto';

      this.isCollapse = true;
      this.isCollapsing = false;
    }, 4);
  }
}

now I got the tree structure as expected like this

+ Transaction ref : 321916010424

+ Transaction ref : 000463000046

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.

collapse component file

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(() => {
      this.height = '0';
      this.isCollapse = true;
      this.isCollapsing = false;
    }, 4);
  }

  show() {
    this.isCollapse = false;
    this.isCollapsing = true;

    this.isExpanded = true;
    this.isCollapsed = false;
    setTimeout(() => {
      this.height = 'auto';

      this.isCollapse = true;
      this.isCollapsing = false;
    }, 4);
  }
}

Ranjeeth Rao · Accepted Answer

The reason all nodes expand is that you are having a common variable ('isCollapsedContent') to indicate if it is collapsed or not. This logic is suitable if you need an 'Expand All/Collapse All' button.

The remedy for your solution is to have an 'isCollapsedContent' attribute for each node. So that based on the click they toggle only the clicked node.

angular 2 - tree view expanding all nodes how to make it expand only child

Answers (2)

Related Questions