Search code examples
angularionic-frameworkionic5

Ionic Expandable/ Accordion List


Please help me, I want to create a simple accordion in ionic 5 I had created ionic accordion list by following a tutorial blog link that used widgets for creating an accordion dropdowns, Below is the link of that blog…
https://masteringionic.com/blog/2019-01-27-creating-a-simple-accordion-widget-in-ionic-4/

The problem is no list appears and no error is shown

accordion output

This is my .html file

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Accordion
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <app-accordion 
     *ngFor="let technology of technologies" 
     name="{{ technology.name }}" 
     description="{{ technology.description }}"
     (change)="captureName($event)">
  </app-accordion>
</ion-content>

mi-accordion.component.html

<h2 (click)="toggleAccordion()">
  {{ name }}
   <span *ngIf="isMenuOpen">&#9650;</span>
   <span *ngIf="!isMenuOpen">&#9660;</span>
</h2>
<div [ngClass]="this.isMenuOpen ? 'active' : 'inactive'">
   <p>{{ description }}</p>
   <ion-button 
      type="button" 
      color="primary" 
      fill="solid" 
      size="default" 
      (click)="broadcastName(name)">Console log me!</ion-button>
</div>

Can someone help if I am missing something? And please tell me if you need others code


Solution

  • I already resolved this by changing the mi-accordion.component.html to

      <app-mi-accordion 
         *ngFor="let technology of technologies" 
         name="{{ technology.name }}" 
         description="{{ technology.description }}"
         (change)="captureName($event)">
      </app-mi-accordion>