Topic: [collapsed] failing if change is too fast (mdbCollapse)

Flub premium asked 2 years ago

Another anoying finding here.

Expected behavior

If [collapsed] is changed, component should always follow the content of the provided value.

Actual behavior

When [collapsed] value is changed too fast (Before the end of the collapsing/uncollapsing animation, i.e. when double-clicking the button) then the state of the component does not reflect the value provided. In other words, component can show itself collapsed when _collapsed is false, or show itself not collapsed when _collapsed is true.

Resources (screenshots, code snippets etc.)

import { Component } from '@angular/core';
  selector: 'app-root',
  template: `
    <div class="d-flex flex-column">
        <button class="btn btn-primary" type="button"
                (click)="_collapsed = !_collapsed"
    <!--Collapsed content-->
    <div class="mt-3" id="collapseExample" mdbCollapse #basicCollapse="mdbCollapse" [collapsed]="_collapsed">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
      squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
      sapiente ea proident.
    COLLAPSED: {{_collapsed}}
export class AppComponent {
    title = 'mdbcollapse';
    _collapsed = true;


Flub premium answered 2 years ago

The thing is that I could not use the collapsed state the way you suggested because, in my case, it has to come from a cookie value, so that's the reason why I needed an external variable holding the collapsed state.

I managed however to find a solution by toggling the cookie, not on the click event, but only after waiting the animation ends instead. To make it short, something like this :

<div class="mt-3" id="collapseExample" mdbCollapse #basicCollapse="mdbCollapse"
       (collapseShown)="_collapsed = true"
       (collapseHidden)="_collapsed = false">

Hope that might help others in similar cases,


Arkadiusz Idzikowski staff answered 2 years ago

@Flub I double-checked that and it looks like the underlying directive variable collapsed is updated correctly. You can use it to update the aria-expanded value instead of creating your own variable.

Here is an example:

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 2.0.0
  • Device: Windows
  • Browser: FF, Edge, Chrome
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No