I am currently working on developing a set of accordion components. My goal is to have only one accordion open at a time out of the three available. Essentially, if one accordion is open and I click on another one, the open accordion should collapse.
At the moment, I am able to toggle the accordions to open and close, but I am struggling to properly 'select' them to apply the "collapse" class when they are not the currently selected one. The select input seems to be false on the first click (although it appears differently in Augury).
In my accordion-group.component.ts file:
import { AccordionComponent } from './../accordion/accordion.component';
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-accordion-group',
templateUrl: './accordion-group.component.html',
styleUrls: ['./accordion-group.component.css']
})
export class AccordionGroupComponent {
@Input() measures;
selected
select(i){
this.selected = i;
}
}
For the accordion-group.component.html:
<app-accordion
*ngFor="let item of items; let i = index"
[item]="item"
[selected]="i === selected"
(click)="select(i)">
</app-accordion>
Moving on to the accordion.component.ts file:
import { Component, Input } from "@angular/core";
@Component({
selector: "app-accordion",
templateUrl: "./accordion.component.html",
styleUrls: ["./accordion.component.css"]
})
export class AccordionComponent {
@Input() item;
@Input() index;
@Input() selected //this needs to receive true on selected component on click
expand: string = "";
isOpen = false;
handleExpansion() {
console.log(this.selected) //logs false on first click
this.isOpen = !this.isOpen;
this.isOpen ? (this.expand = "expand") : (this.expand = "collapse");
}
}
And finally, for accordion.component.html:
<div
(click)="handleExpansion()"
class="accordion noHighlight {{expand}}">
</div>