I am unable to expand a mat-expansion-panel component within an Ionic 5 application.
I have template code as follows
<ion-header>
<ion-toolbar>
<ion-title>Jounral Entries</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<mat-accordion multi disabled="false">
<mat-expansion-panel *ngFor="let jEntry of journalEntries$ | async" (opened)="handleOpen()" (closed)="handleClosed()" disabled="false">
<mat-expansion-panel-header disabled="false">
{{jEntry.name}}
</mat-expansion-panel-header>
<div>we got some content</div>
</mat-expansion-panel>
</mat-accordion>
<!-- <mat-accordion clickable>
<mat-expansion-panel hideToggle>
<mat-expansion-panel-header>
<mat-panel-title>
This is the expansion title
</mat-panel-title>
<mat-panel-description>
This is a summary of the content
</mat-panel-description>
</mat-expansion-panel-header>
<p>This is the primary content of the panel.</p>
</mat-expansion-panel>
<mat-expansion-panel (opened)="panelOpenState = true"
(closed)="panelOpenState = false">
<mat-expansion-panel-header>
<mat-panel-title>
Self aware panel
</mat-panel-title>
<mat-panel-description>
Currently I am {{panelOpenState ? 'open' : 'closed'}}
</mat-panel-description>
</mat-expansion-panel-header>
<p>I'm visible because I am open</p>
</mat-expansion-panel>
</mat-accordion> -->
</ion-content>
I’ve commented out code that comes straight from the angular documentation page as I also tried to use theirs to see if I had anything wrong, and theirs will not work either. The expansion panel does show up and the header content is there, but it isn’t clickable, and the cursor doesn’t turn to the hand like it should for a button and when clicked, the expansion panel doesn’t open.
The module that contains the component displaying the expansion panel:
@NgModule({
imports: [
CommonModule,
SharedModule,
JournalRoutingModule
],
declarations: [JournalComponent]
})
And SharedModule exports MatExpansionModule. As mentioned it does show up, it just won’t open.
I’ve also found this page that shows pretty much what I’m doing so I can’t figure out what it is
1 post - 1 participant
| upload_apk_to_play_store | 4 |
A full solution to create an e-commerce app for Android, iOS and the web 
Stripe Payments
