Angular 8 accordion with Dynamic data without using bootstrap/angular material

Question

I am trying to implement accordion functionality without using bootstrap/angular material accordion. My data is coming dynamically from an api.

I tried doing below but that opens and closes all the panels together. I understand the reason behind it but I don't understand how to approach.

Component.ts

export class AccordionComponent implements OnInit {
    isHidden = true;
    mFaqs: IFaq[];
    constructor(private faqService: FaqService) { }

    ngOnInit() {
        this.faqService.getFaqs()
            .subscribe(faqData => this.mFaqs = faqData );
    }

}

component.html

<div class="custom-header" hideToggle="true" (click)="isHidden = !isHidden" *ngFor="let faq of mFaqs?.faqs">
    <section>
        <section>
            Q: {{ faq.question }}
        </section>
        <p [hidden]="isHidden">
            {{ faq.answer }}
        </p>
    </section>

</div>

It should only close/open the clicked one.

check `details summary` html tag – Najam Us Saqib Jul 16 '19 at 12:48 — Najam Us Saqib, Jul 16 '19 at 12:48

score 3 · Accepted Answer · answered Jul 16 '19 at 12:42

3

You need to pass unique id for that.

Might be it'll help you.

Angular on click event for multiple items

please go through it.

answered Jul 16 '19 at 12:42

Sourav Raj

161
2
12

1

Sourav Raj: Huge thanks for your answer! It did work for me :) – Sonal Jul 16 '19 at 14:52

Angular 8 accordion with Dynamic data without using bootstrap/angular material

1 Answers1