Ionic angular dropdown list

Ionic Framework Ionic Angular
1

I have a problem with dropdown list, I don’t understand how to expand the list and hide it. Does anyone have any ideas what needs to be added, preferably without using third-party libraries. My idea was that we have a list, and to the right of each is a button. When you click on the button, a list opens under the list on which the button was clicked

list0 ----- button0 (noclick)
list1 ----- button1 (click)
- list1.1
- list1.2
list3 ----- button3 (noclick)
list4 ----- button4 (click)
- list4.1
- list4.2
- list4.3

services.page.html:

  <ion-list *ngFor="let e of services">
    <ion-item-divider>
      <ion-label>{{e.Name}}</ion-label>
    </ion-item-divider>
    <div *ngIf="e.ListServices != null">
      <ion-item *ngFor="let g of e.ListServices">
        <ion-label>{{g.Description}}</ion-label>
      </ion-item>
    </div>
  </ion-list>
</ion-content>

JSON:

   {
      "GuidServicesId":"9647d79b-2b10-4e7d-bd26-199cda4da4aa",
      "Name":"asd",
      "ListServices":[
         
      ]
   },
   {
      "GuidServicesId":"1760d99a-fe30-4573-885f-1e0dabc97c6e",
      "Name":"asda",
      "ListServices":[
         {
            "GuidListSevicesId":"9b45ffe1-7a50-430b-b1ba-57d24e4ae877",
            "Description":"testlistr",
            "consultationRequests":[
               
            ],
            "ServicesId":"1760d99a-fe30-4573-885f-1e0dabc97c6e"
         },
         {
            "GuidListSevicesId":"fec5b5ca-34ad-41bc-aa1d-a0727d3f48df",
            "Description":"asdasdas",
            "consultationRequests":[
               
            ],
            "ServicesId":"1760d99a-fe30-4573-885f-1e0dabc97c6e"
         },
      ]
   }
]
2

These are typically called accordions. @joshmorony has written a tutorial for building one yourself using Ionic. Personally, I’m a fan of angular-material’s tree component.

2 Likes
3

Just as an info: Version 6 of Ionic will have a Accordion Component: https://twitter.com/liamdebeasi/status/1364670529861537793?s=21 :blush:

1 Like
4

Thanks for linking to my post :slight_smile: I also have a more recent one on creating a high performance accordion entirely with transforms: https://www.joshmorony.com/high-performance-animated-accordion-list-ionic/

It’s more complex and has some limitations, but is able to shrink/expand the list without animating height.

2 Likes