1

https://stackblitz.com/edit/angular-ngx-virtual-scroller-byykpn

Here is what I have done so far, now I need to Expand/Collapse all divs which is after the group header.

2 Answers 2

1

You could wrap those divs in an ng-container with ngIf and toggle expansion. I just considered you have a unique id for each item. So we can just use it to mark which item is expanded. In case you do not have a unique key for each item, you could just use the index of the item.

Your Template:

<button (click)="toggleExpand(item.id)">expand</button>

  <ng-container *ngIf="item.id == isExpanded">
          <div class="Question">Question1</div>
        <div class="Question">Question2</div>
        <div class="Question">Question3</div>
        <div class="Question">Question4</div>
        <div class="Question">Question5</div>
  </ng-container>

The toggle method:

toggleExpand(val) {
    this.isExpanded= val == this.isExpanded? '' : val;
  }

If you want to expand more than one row in the same time, then you should memorize the expanded rows in an object isCollapsed where the key is the expanded item.id and the value is a boolean e.g.

  isExpanded = {};

  toggleExpand(val) {
    this.isExpanded[val] = !this.isExpanded[val];
  }

And adjust your ng-container to:

<ng-container *ngIf="isExpanded[item.name]">
Sign up to request clarification or add additional context in comments.

9 Comments

Thanks, @Mehyar, But here I am using ngx-virtual-scroll and respect of it, and without adding ng-container can we do it? Thanks once again.
ng-container is a standard angular element and is not a bad idea to use it. But for sure you could replace the ng-container with a div and keep the ngIf on the div. You should keep in mind that ng-container is useful in case you do not need to add another html element to the tree.
in my case, I am not able to differentiate question list, it like [{question1, group1}, {question2, group1},{question3, group2}.......{questionN, groupN} ]
Sorry I don not get what you mean. Could you explain
ok, so I want to say like the objects list what I am getting from API side is like [{question1, group1}, {question2, group1},{question3, group2}.......{questionN, groupN} ] , that's why I am not able to make an ng-container for questions list for a particular group.
|
1

You only need to have a boolean array for mapping collapsed divs.

See your code working HERE

https://stackblitz.com/edit/angular-ngx-virtual-scroller-nzqnbw?file=src/app/app.component.html

isCollapsed: boolean[] = [];

  constructor(private cd: ChangeDetectorRef) {
    for (let i = 1; i < 10; i++) {
      this.items.push({ name: 'Item ' + i });
      this.isCollapsed[i] = true;
    }

    // Just to see the first item not collapsed, you can omit it if you want them all collapsed by default.
       if (this.items.length > 0) { this.isCollapsed[0] = false; }
  }

HTML:

 <div
        *ngFor="let item of scroll.viewPortItems; let indexOfColaps = index"
        class="groupQuestion"
      >

<div *ngIf="!isCollapsed[indexOfColaps]">
          <div class="Question">Question1</div>
          <div class="Question">Question2</div>
          <div class="Question">Question3</div>
          <div class="Question">Question4</div>
          <div class="Question">Question5</div>
</div>

\\You can change div *ngIf="... for container *ngIf="... if you want.

6 Comments

Hi, Thanks, I have update stackBlits stackblitz.com/edit/angular-ngx-virtual-scroller-pzybnr please ignore *ngIf="!(indexOfColaps % 5)" it will be add by dynamic.
ok, so for these new changes, here you got your working code: stackblitz.com/edit/… In order to simplify it, I needed to add 2 new fields to item object, groupNumber:number and showQuestion:boolean
Thanks, I will implement this Thanks a lot
stackblitz.com/edit/angular-ngx-virtual-scroller-wh7oof please check this and expand the first group and scroll to the end
Sorry but this last url you have provided, doesn't work (It doesn't fully load the web, stays with the spinner forever...showing the message "Starting dev server"...)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.