CODEWITHSUNDEEP
angularionic4
Shaik
Shaik

Reputation: 296

Ionic accordion dropdown open and close

I had created ionic accordion dropdown menus by following a tutorial blog link which used widgets for creating an accordion dropdowns, Below is the link of that blog. http://masteringionic.com/blog/2019-01-27-creating-a-simple-accordion-widget-in-ionic-4/

Below is the my project link which i uploaded in github https://stackblitz.com/github/dSaif/search-accordion

Everything is working fine but i want the toggle dropdown(open dropdown need to gets closed automatically when i open any other drop down menu on click to the icon provided)

Please help me how can i do this as iam newbie to ionic and angular.

thank you.

Upvotes: 1

Views: 3963

Answers (1)

rtpHarry
rtpHarry

Reputation: 13125

The way you have set it up is that you have a bunch of <app-accordion> in your document like:

<app-accordion></app-accordion>
<app-accordion></app-accordion>
<app-accordion></app-accordion>
<app-accordion></app-accordion>
<app-accordion></app-accordion>
<app-accordion></app-accordion>

It can't know what its neighbour is doing, but it doesn't need to, because the best practice is to define the bottom-most components to be as "dumb" as possible.

What you need is an @Input property for the isMenuOpen that you already have. And then in a parent component you keep a list of bools, one for each accordion item.

  <app-accordion
     *ngFor="let technology of technologies; let i = index"
     [isMenuOpen]="isMenuOpen[i].isOpen"
     [name]="technology.name"
     [description]="technology.description"
     [image]="technology.image"
     (change)="captureName($event)"></app-accordion>

You should really rename your app-accordion to app-accordion-item and then make a new wrapper component app-accordion which can manage this.

Notice that I also improved the way your Input variables are being set to make them [] one way databound instead of using the interpolation method you were using before.

I also added let i = index which is an Angular feature to get the index of the loop, so you can get the right item in the isMenuOpen array.

So how does isMenuOpen keep up to date? Well you need a to write another @Output for the accordion-item to emit each toggle, with its index and its status, and then you can update the isMenuOpen array.

So this meets our original intention, because the bottom level accordion item doesnt really know anything about the state, it just displays the open or closed that you tell it to from above, and then announces when it gets toggled itself, but leaves the storing of information up to the parent accordion component.

Upvotes: 2

Related Questions