10+ Angular 2 Accordions Demos

Here are some Angular 2 Accordions Demos which will hopefully save you time looking for links to demos and articles on how to code this in ng2/typescript. Some have good demos and some are just options for accordions. I thought it would be easy to find accordions, I guess there are not as popular as they used to be… Also I thought it was called Accordians haha guess I was wrong!? I’ll add some more when they get coded! 🙂

1. Angular2 Accordion using bootstrap3

Angular2 Accordion using bootstrap3
Angular2 Accordion using bootstrap3

Simple accordion control for your angular2 applications using bootstrap3. Does not depend of jquery. If you don’t want to use it without bootstrap – simply create proper css classes. Please star a project if you liked it, or create an issue if you have problems with it.

Code

2. Boostrap 4 Angular Accordion Component TypeScript

Boostrap 4 Angular Accordion Component TypeScript
Boostrap 4 Angular Accordion Component TypeScript

The NgbAccordion directive is a collection of panels. It can assure that only panel can be opened at a time.

Code Article Demo

3. Angular 2 Accordion Component

Angular 2 Accordion Component
Angular 2 Accordion Component

Simple Angular 2 accordion component with smooth transitions/animations

Code Demo

4. IntegralUI Accordion for Angular 2

IntegralUI Accordion for Angular 2
IntegralUI Accordion for Angular 2

IntegralUI Accordion is a native Angular 2 component that represents a list of expandable panels arranged horizontally or vertically. It is a more advanced version of Accordion directive for AngularJS. In this article, we will give detailed information on what features are included in Accordion component.

Article and Demo

5. Accordion for Angular2 App

Super nice accordions wih animation for angual2 apps based on bootstrap3.

Article Code

6. Angular Material Expansion Panels

Angular Material Expansion panels
Angular Material Expansion panels

Expansion panels contain creation flows and allow lightweight editing of an element.

Article and Demo

7. Ng2 Zippy (Accorn type) Component

Ng2 Zippy (Accorn type) Component
Ng2 Zippy (Accorn type) Component

This component demonstrates the basics of how data flow in Angular 2 using component inputs and outpus works. Whenever you open or close the component, it emits an event which logs the state in the application.

Article Demo Code and more demos

More coming soon…

Sam is a passionate web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and reading.

Leave a Reply

Your email address will not be published. Required fields are marked *