Ionic 5 Expandable/ Accordion List

Ionic Framework Ionic Angular
1

Please help me, all I want to do is 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 shown

image
image287×514 1.75 KB

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

2

Are you using Angular? Or can you share the package.json file please

3

Yes, i’m using Angular. Here is my package.json

{
  "name": "ionic-accordion",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@capacitor/core": "2.0.1",
    "@ionic-native/core": "^5.0.7",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.20",
    "@angular/cli": "~8.3.23",
    "@angular/compiler": "~8.2.14",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@capacitor/cli": "2.0.1",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project"
}
4

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>