Collapsing fixed button programmatically

web
mobile

Topic: Collapsing fixed button programmatically

mdb2 pro asked 2 years ago

How can I collapse fixed button programmatically after a pop up button click or programmatically ? https://mdbootstrap.com/angular/components/buttons/

Damian Gemza staff commented 2 years ago

Dear mdb2, For now there's possible to open a fixed button only by clicking or hovering it. If you'll try to open a fixed button after clicking on another element, it won't open correctly. That's a bug and we have to fix it. Best Regards, Damian

mdb2 pro commented 2 years ago

The question refers to closed the fixed buttons after clicking on one of them, not about opening them

Damian Gemza staff commented 2 years ago

Dear mdb2, Could you please describe your case one more time? I think that I don't understand your question well. Please correct me if I'm wrong: Do you want to close fixed button or few fixed buttons after clicking on one of them? If yes, it's not possible, because hiding / showing the fixed collapse button content is done with click / hover event on the button. Best Regards, Damian

mdb2 pro commented 2 years ago

After the user opens the fixed menu to see his options, he clicks on a menu item and an action performs. Now the fixed menu needs to close as it is not in use any more Basically like any other menu that closes on click

Arkadiusz Idzikowski staff answered 2 years ago

Dear mdb2, You can add (click)="fixed.toggle($event) to the menu item (or to the div container if you don't want to repeat this for every link, but in that case user will be able to close fixed menu even after clicking near the icon).
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">

<a class="btn-floating btn-large red waves-light"mdbWavesEffect (click)="fixed.toggle($event)">

<i class="fa fa-pencil"></i>

</a>

<div class="fixed_collapse" [mdbCollapse]="isCollapsed" #fixed="bs-collapse">

<a class="btn-floating red waves-light" (click)="fixed.toggle($event)"mdbWavesEffect><iclass="fa fa-star"></i></a>

<a class="btn-floating yellow darken-1 waves-light"mdbWavesEffect><iclass="fa fa-user"></i></a>

<a class="btn-floating green waves-light"mdbWavesEffect><iclass="fa fa-envelope"></i></a>

<a class="btn-floating blue waves-light"mdbWavesEffect><iclass="fa fa-shopping-cart"></i></a>

</div>

</div>
Best,
Arek
 

mdb2 pro commented 2 years ago

Excellent !

itay pro answered 2 months ago

2 years later, what is the easiest way to open a fixed menu programmatically ?


Arkadiusz Idzikowski staff answered 2 months ago

You need to use @ViewChild directive to get access to the collapse methods in your component.

@ViewChild('fixed') fixed: CollapseComponent;

Then in AfterViewInit hook (the method won't be available before view init):

Promise.resolve().then(() => {
     this.fixed.show();
 })

The promise is there to avoid Angular ExpressionChangedAfterItHasBeenCheckedError error.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No