How to open Nebular Accordion by default with Ngfor

Question

I am using latest Nebular version with Angular 7, facing an issue while using nebular accordion. Issue: By default active accordion should expanded not all, I have tried to use expanded = true but with this all accordion expanded which is not the use case.

<nb-accordion>
    <nb-accordion-item *ngFor="let list of lists" expanded =true >
        <nb-accordion-item-header>
            {{list.name}}
        </nb-accordion-item-header>
        <nb-accordion-item-body >
            <ul >
                <li *ngFor="let item of list.category" [value]="item.id" 
                [ngClass]="{'active': item.id == categoryId}">
                    <div class="col-9">{{item.name}}</div>
                </li>
            </ul>
        </nb-accordion-item-body>
    </nb-accordion-item>
</nb-accordion>

score 4 · Answer 1 · answered Mar 12 '19 at 14:01

In case you need to expdand a particular element, you can move the expanded flag inside of your lists array, something like this:

  lists = [
    {
      name: 'Test',
      expanded: false,
    },
    {
      name: 'Test 2',
      expanded: true,
    },
  ];

and then use it as the expanded property value:

<nb-accordion>
    <nb-accordion-item *ngFor="let list of lists" [expanded]="list.expanded">
        <nb-accordion-item-header>
            {{list.name}}
        </nb-accordion-item-header>
        <nb-accordion-item-body >
            Hello
            World
        </nb-accordion-item-body>
    </nb-accordion-item>
</nb-accordion>

Here you go https://stackblitz.com/edit/github-e99ybz?file=src/app/home/home.component.html

score 0 · Answer 2 · answered Oct 26 '20 at 09:31

According to the Documentation, U can use like that =>

HTML

<nb-accordion *ngFor="let level of datalist" multi>
   <nb-accordion-item #item>
       <nb-accordion-item-header>header</nb-accordion-item-header>
       <nb-accordion-item-body>body</nb-accordion-item-body>
   </nb-accordion-item>
</nb-accordion>

Component

@ViewChildren('item') accordion;

  constructor(private cdr: ChangeDetectorRef) { }

  ngAfterViewInit(): void {    
   
      this.accordion.changes.subscribe(ac =>
        {
          ac.toArray().forEach(el => {     
              el.toggle();
              this.cdr.detectChanges();
            }); 
        });
        
  }

Explanation

I used @ViewChildren for multiple DOM.
And call this DOM Child at ngAfterViewInit and just call toggle()

Note: After that u need to call detectChanges() method because its can't detect change by automatically.if u don't add this line, u will have this error=>

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'collapsed': 'true'. Current value: 'false'.

score 0 · Answer 3 · edited Jun 20 '21 at 10:13

0

Use collapsedChange event

 <nb-accordion-item
    (collapsedChange)="getChildModulesList($event,module._id)"
    
    #item *ngFor="let module of parentModuleList ">

edited Jun 20 '21 at 10:13

Mark Rotteveel

100,966
191
140
197

answered Jun 19 '21 at 20:10

Shashwat Gupta

5,071
41
33

How to open Nebular Accordion by default with Ngfor

3 Answers3