Topic: mdbAccordionItemHeader (click)

Declan Ward priority asked 1 year ago


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


Rafał Seifert free answered 1 year ago


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.


Declan Ward priority answered 1 year ago


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>


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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