Float Items Button BUG
Closed this issue · 8 comments
Pressing the Float item button does not reset the ngc-float-button active class and creates a visual bug:
@RicardoVaranda thx for the issue, can you provide a demo 'forking' the https://stackblitz.com/edit/ngc-float-button template?
@GustavoCostaW The bug occurred in here too.
@RicardoVaranda @leonardovff can you provide me a demo link to reproduce this error?
Project is private so sadly I am not able to give you a link to it, let me try and create a fresh repo to help you debug
@RicardoVaranda can you provide me a link in stackblitz to simulate this behavior?
@GustavoCostaW Here is a pretty simple case simulating this behavior, stackblitz.
Click on the first floating item and the red FAB button doesn't resize. It looks like the fab-menu active class doesn't get removed which causes the shrinking. Hope this helps!
The issue here appears to be the following in the template markup.
[class.active]=\"state.getValue().display\">
- state is a BehaviorSubject
- the .getValue() method is only called once at time of render and without a subscription will not update the UI when the observable receives new data in the stream.
Modify it to the following in line 161 of ngc-float-button.component.js and the template markup will have a subscription to the Observable and toggle the class correctly.
[class.active]=\"(state | async).display\">
@RicardoVaranda @gabemazerogers @leonardovff
Hi guys, the problem is exactly what the @xxNoxiouSxx said, {{state.getValue().display}} was never notified when the state was changed causing the problem.
To fix that, {{(state | async).display}} is a great way that the angular provide us to subscribe the state and update the display property when the state change automatically.
Just update your ngc-float-button to 1.2.1 version and enjoy =]
Cheers to @xxNoxiouSxx.