How to create a collapse feature that allows only one item to be open at a time in Angular

I developed an angular app with a collapse feature, but I noticed that multiple collapses can be open at once. I am utilizing Ng-Bootstrap collapse for this functionality. Below is the code snippet from the TS file:

public isCollapsed = true;

And here is the corresponding HTML code:

<tr
        class="row-green pe-auto"
        (click)="collapse.toggle()"
        [attr.aria-expanded]="!isCollapsed"
      >
        ...

        ...

        ...
      </tr>

      <tr class="clp-row clp-r1">
        ...

        ...

        ...
      </tr>

      <tr
        class="row-blue"
        (click)="collapse.toggle()"
        [attr.aria-expanded]="!isCollapsed"
      >
        ...

        ...

        ...
      </tr>
      <tr class="clp-row clp-r1">
        ...

        ...

        ...
      </tr>

I want to ensure that each collapsible section functions independently so that opening one does not impact the others.

angulartypescriptlayoutng-bootstrapcollapsable

Answer №1

To ensure each collapsible operates independently, it is necessary to create a separate boolean variable for each.

public isCollapsed1 = true;
public isCollapsed2 = true;

By maintaining separate states for each collapsible, expanding one will not affect the other.

<tr
  class="row-green pe-auto"
  (click)="collapse1.toggle()"
  [attr.aria-expanded]="!isCollapsed1"
>
  <td>
    <img
      src="assets/images/home/row-expand.png"
      data-toggle="collapse"
      data-target=".row1-hide"
    />
    Created
  </td>

  <td>User </td>
  <td>Tuesday</td>
</tr>

<tr class="clp-row clp-r1">
  <td colspan="3">
    <div
      class="collapse row1-hide"
      #collapse1="ngbCollapse"
      [(ngbCollapse)]="isCollapsed1"
    >
      <div class="t-logdiv">
        <!-- Content for collapsible 1 -->
      </div>
    </div>
  </td>
</tr>

<tr
  class="row-blue"
  (click)="collapse2.toggle()"
  [attr.aria-expanded]="!isCollapsed2"
>
  <td>
    <img
      src="assets/images/home/row-expand.png"
      data-toggle="collapse"
      data-target=".row2-hide"
    />
    Created user
  </td>

  <td>new kiid - Joey</td>
  <td>Tue 10</td>
</tr>

<tr class="clp-row clp-r1">
  <td colspan="3">
    <div
      class="collapse row2-hide"
      #collapse2="ngbCollapse"
      [(ngbCollapse)]="isCollapsed2"
    >
      <div class="t-logdiv">
        <!-- Content for collapsible 2 -->
      </div>
    </div>
  </td>
</tr>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Animations within Angular components are being triggered even after the parent component has been removed from

When a child component has an animation transition using query on mat-table rows, hiding the parent component will now trigger the child animation. To see this in action, check out this reproduction scenario: https://codesandbox.io/s/intelligent-jasper-hz ...

javascriptangularanimationangular-animations

Tips for incorporating a mesh into Forge Viewer v6 with Typescript

Is there a way to add meshes to Forge Viewer v6 using Type script? I've tried various methods that worked with v4, but I'm encountering issues now. private wallGeometry: THREE.BoxBufferGeometry; drawWalls() { ...

typescriptthree.jsautodesk-forgeautodesk-viewerautodesk

When using tsdx with React, null values can prevent proper usage of hooks

Recently, I attempted to develop a React TypeScript component using tsdx for compilation and encountered a roadblock while debugging. The package appears to be successfully published and installed without any errors. However, when trying to use it, I consi ...

reactjstypescriptnpmpackagetsdx

A guide on dynamically displaying Primeng Components within Angular applications

My task involves dynamically rendering Primeng components along with regular HTML elements. The template for rendering is stored as a string, as shown below: const dynamicTemplate = `<div class="card flex flex-row gap-3 justify-content-cen ...

node.jsangularprimengsoftware-design

How to link an image from a location outside the src folder in an Angular project

I am currently working on an online store project, and I have a specific issue with my image files being stored outside the src folder. The path to the images is within the flowersApp folder under img Is there a way for me to access these images from this ...

sqljsonangular

Generate a two-digit number within a looping structure

Hey there, I have a task where I need to generate numbers within a for loop. For numbers 1 to 9, I want to prepend '0' to them so they appear as 01, 02, 03...09, 10.... Here is how I approached it: for (var a = 1; a < 30; a++) { ...

angular

Avoid using the Input formControlName in the Angular 6 form

Before submitting the form, I want to be able to retrieve the value of the input tag with formControlName. I have tried creating a method to accomplish this, but I am unable to access the current input value. When I removed the formControlName to exclude ...

angular

Tips for preserving data in Angular form fields

Within my angular application, a scenario exists where two pages are involved. On the initial page, users input data into a form and proceed by clicking "continue" which leads them to the subsequent page. The following page features a back button that ena ...

angular

Tips for successfully passing an Observable identifier to mergeMap

Monitoring the outputs of a list of observables with mergeMap is straightforward, as shown in this example code snippet: export class TestClass { test() { const observableA = of(1, 2, 3); const observableB = of(7, 3, 6); const observableC = ...

angularrxjsobservable

Tips for identifying errors in Angular's HTTPClient.post() method when working with generics

This question has been asked numerous times on SO, but none of the responses address my issue. Therefore, I am rephrasing it. Here is a method (within a service) that performs a post request. makePostReq<T>(reqObj: {url:string, body:any, headerDa ...

angular

Guide on properly defining typed props in Next.js using TypeScript

Just diving into my first typescript project and finding myself in need of some basic assistance... My code seems to be running smoothly using npm run dev, but I encountered an error when trying to use npm run build. Error: Binding element 'allImageD ...

typescriptnext.js

Tips for customizing the appearance of Angular Material select drop down overlay

In my project, there is an angular component named currency-selector with its dedicated css file defining the styling as shown below: .currency-select { position: absolute; top: 5px; right: 80px; z-index: 1000000; color: #DD642A; f ...

htmlcssangularangular-material2

The div is not showing the image as expected

Having some trouble creating a slideshow within my angular application. Struggling to get the images to display in the html code. To tackle this, I decided to create a separate component specifically for the slideshow (carousel.component). In the main app ...

cssangular

Extending the type of parameters in TypeScript

I am trying to call a function from my UI library with a parameter type that extends the original (Suggestion) type by adding more properties. I found a resource that suggests it is possible here: https://github.com/Microsoft/TypeScript/issues/2225 (in the ...

reactjstypescript

Converting an array of date strings to a single string in JavaScript

Here is the JSON format I received with dynamic data: {"range":["2018-07-23T16:03:26.861Z","2018-07-23T16:03:26.861Z"]} Now, I need to convert this into the following format: range(20180723,20180723) Below is my code snippet : var data:Date[] = {"rang ...

javascriptangulartypescript

Angular 6 tutorial: Creating a dynamic side navigation bar with swipe and drag functionality using Angular Material/Bootstrap

I am currently working on implementing a vertical swipeable/stretchable side nav-bar with angular-material in angular 6. However, I have encountered an issue with mouse interactions for stretching the nav-bar. Below is the code snippet: Here is the HTML c ...

javascriptangularbootstrap-4angular-material2sidebar

Quickly send off an Angular 4 HTTP POST request and move on

I've been experimenting with making a fire and forget request, but none of my attempts seem to be working as expected. The situation is that after completing one subscribable request, I need to redirect to another page. However, before the redirectio ...

angularhttp-post

I'm running into an issue where my API calls are being duplicated

Every time I refresh the page, the network preview displays a duplicate API call to (ipaddress)/(portnumber)/admin/user-group?page=1&page_size=10&query= twice. I've tried making changes to the useEffect() and handleSearch() functions without s ...

javascriptreactjstypescriptnext.js

Nearly every category except for one from "any" (all varieties but one)

In Typescript, is it feasible to specify a type for a variable where the values can be any value except for one (or any other number of values)? For instance: let variable: NOT<any, 'number'> This variable can hold any type of value excep ...

typescript

Is it possible to continuously activate an Angular Input setter using a Subject?

Is there a way to activate an @Input setter without providing a value, by utilizing RxJS' Subject()? It seems that the setter only gets triggered once, most likely because no value has been changed. How can I ensure that the input is activated every ...

angularrxjsbinding