Using ngx-bootstrap Collapse feature for multiple sections in Angular 14

In this article, we discuss how to integrate collapse in multiple sections in ngx-bootstrap directly it’s not possible to write code directly we need to code differently here we discuss 2 ways to build “Collapse” multiple sections. For that First, we need to install “ngx-bootstrap” package to run below command

npm install ngx-bootstrap --save

After running the above command we need to add the bootstrap CSS to our index.html file.


<!--- index.html -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">

after adding CSS now ready to use bootstrap in our application.
For collapse using our app, we need to import the module in our module file displayed in the below code.


import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { CollapseModule } from 'ngx-bootstrap/collapse';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    CollapseModule.forRoot(),
    ...
  ]
})
export class AppModule(){}

1) First way to implement collapse in multiple sections we define “isCcollapsed” as one parameter for the object your array object display like below


 public sectionData = [
    {
      question: 'Lorem Ipsum dummy data',
      answer:
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
      isCollapsed: true,
    },
    {
      question: 'Lorem Ipsum dummy data',
      answer:
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
      isCollapsed: true,
    },
    {
      question: 'Lorem Ipsum dummy data',
      answer:
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
      isCollapsed: true,
    },
  ];

In HTML You need to update code like below


<div class="row" *ngFor="let property of sectionData">
  <div class="col-sm-12 well-sm well-sm">
    <div
      class="col-sm-4 col-md-1"
      (click)="property.isCollapsed = !property.isCollapsed"
      [attr.aria-expanded]="!property.isCollapsed"
      aria-controls="collapseBasic"
    >
      <i
        class="fas"
        [ngClass]="property.isCollapsed == true ? 'fa-plus' : 'fa-minus'"
      ></i>
    </div>
    <div class="col-sm-8 col-md-11">{{ property.question }}</div>
  </div>

  <div
    id="collapseBasic"
    [collapse]="property.isCollapsed"
    [isAnimated]="true"
    style="margin: 20px;"
  >
    {{ property.answer }}
  </div>
</div>

2) Second way to implement collapse in multiple sections we define “isCollapsed” as Boolean Array. How its work display in below code


public isCollapsed: boolean[] = [];

In HTML You need to update code like below



<div class="row" *ngFor="let property of sectionData; let i = index">
  <div class="col-sm-12 well-sm well-sm">
    <div
      class="col-sm-4 col-md-1"
      (click)="isCollapsed[i] = !isCollapsed[i]"
      [attr.aria-expanded]="!isCollapsed[i]"
      aria-controls="collapseBasic"
    >
      <i
        class="fas"
        [ngClass]="isCollapsed[i] == true ? 'fa-minus' : 'fa-plus'"
      ></i>
    </div>
    <div class="col-sm-8 col-md-11">{{ property.question }}</div>
  </div>

  <div
    id="collapseBasic"
    [collapse]="!isCollapsed[i]"
    [isAnimated]="true"
    style="margin: 20px;"
  >
    {{ property.answer }}
  </div>
</div>

Below is the full embedded code for Events fire using “ModalDirective.”

Spread the love