Angular Accordion Directive

Angular includes a javascript library for a Grid Directive (ui-grid.js) and it is a time saver but there isn’t one for an Accordion that contains a table. I see examples in various places where people “claim” their code is a Directive but their code is just a Bootstrap Accordion with a table inside it. In other words there is no javascript that reads a table definition and renders the table with a record in it in each Accordion line item.

In addition I have searched 3rd party vendors and none of them I have seen offer this kind of Directive.

This makes me think this cannot be easily done and is not worth the time and effort or it just can’t be done.

Does any one have any input on this? I have a rather difficult person breathing down my neck over this and they cannot accept that perhaps this is not the way to go or that it is not possible without expending many hours of development for little bang.

BTW - this shop is in the stone age using Angular 1.5.8 in a .net environment.


Then it’s called AngularJS :wink:
Angular means Angular 2+, which is totally different.

Hi There!

I’ve used ui-grid before. It doesn’t support accordion-like grouping out of the box, but I’ve seen examples of it being done. On that same note, I know that it won’t be a clear path to create this additional functionality. I do think wiring a bootstrap accordion into your ui-grid might be the easiest path forward, which is why so many people have attempted it. It allows you to focus on the data / logic, while bootstrap does the heavy lifting of css.

If you are looking for a fast win and have a budget to work with, check out ag-grid. Their enterprise version rolls with accordions (called grouping and pivots) out of the box and is probably the most advanced grid for AngularJS that I’ve worked with.

Hope this helps.

PS: AngularJS is old, but it isn’t the stone age yet. It’s staged of end of support around 2021. Until then small fixes will be added occasionally. Our team has used technologies like Webpack, ES6, Babel, and Typescript to spruce up this old framework until we can cross over to Angular.

Yeah, but you’d probably get more support if you use angular 2+ :slight_smile:
(i dont know anuglar 1 btw, know 2+ tho)

I would unfortunately have to disagree. I think at its core, both are Javascript frameworks. They also aren’t that different. Angular simple removes a lot of confusing elements that existed in AngularJS, as well as takes advantages of new technologies right out of the box such as Typescript, rxjs, and more.

Our team has 3 active AngularJS apps and 1 Angular app in production, and then 2 Angular apps in development. I enjoy working in both since we have made a decision to use Typescript across the board, however if you have the opportunity I would suggest Angular as it is much faster than AngularJS. (thats a fact)

According to what you’re saying, you’re agreeing with me. :wink: I recommend Angular more than AngularJS, and agree with everything you’re saying :wink:

Thanks for the discussion. I am TOTALLY with all that Angular JS is fast becoming a dinosaur but this is what I have to work with here due to the application’s reliance on their security model code. I have not found anything that shows a Bootstrap Accordion used as a Directive so I surmise it either is not economical to do since Accordions are easy to copy, paste and change OR it is not possible. The ag-grid is very nice but I did not see the functionality in their demos and this company will not spend the money ag-grid costs even if it did. They will either accept reality or find another programmer to beat down.

1 Like

I’ve been in that boat so many times. With enough time and money almost anything is possible.

Here is a link to ui-grid’s expandable rows.!/tutorial/Tutorial:%20216%20Expandable%20grid

That should provide what you are looking for. The only other thing, is maybe our definitions of accordion differ. Unfortunately I can’t tell you it isn’t possible, it just may be difficult to do depending on the requirements set up by your company.