Topic: mdbAccordionItemHeader (click)
Expected behavior
(click) event to fire on clicking header
Actual behavior
nothing happens
Resources (screenshots, code snippets etc.)
This was the html in a previous version that worked fine:
<mdb-accordion class="accordion">
<mdb-accordion-item *ngFor="let date of docDays">
<ng-template mdbAccordionItemHeader> (click)="onDayClick([date.Date])">
<div >
<i class="fas fa-file-alt mr-1 comonth"></i>
Created: {{ date.Date | date:'dd MMM yyyy' }} ({{ date.DocumentCount }})
documents
</div>
</ng-template>
...
Upgrading to MDB5 changed the code to:
<mdb-accordion [flush]="true">
<mdb-accordion-item *ngFor="let date of docDays">
<ng-template mdbAccordionItemHeader (click)="onDayClick([date.Date])">
<div >
<i class="fa fa-file-alt mr-1 comonth"></i>
Created: {{ date.Date | date:'dd MMM yyyy' }} ({{ date.DocumentCount }}
documents)
</div>
</ng-template>
...
onDayClick worked fine before the update to MDB5. Now it doesn't fire. What am I missing?
Regards, Declan
We were unable to replicate the working event binding example on the <ng-template> element. We recommend attaching event bindings to real DOM elements, as demonstrated with the <div> element implementation. We appreciate your understanding and the proper solution you've provided.
With a little css this should work :
<mdb-accordion [flush]="true" [multiple]="false">
<mdb-accordion-item [collapsed]="true" *ngFor="let item of items" >
<ng-template mdbAccordionItemHeader>
<div (click)="onClickHeader(item.title)" style="width: 100%;">
{{item.title}}
</div>
</ng-template>
<ng-template mdbAccordionItemBody>
{{item.value}}
</ng-template>
</mdb-accordion-item>
</mdb-accordion>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 5.1.0
- Device: Desktop
- Browser: All
- OS: Windows 11
- Provided sample code: No
- Provided link: No