Topic: Back of Flipping Card Hidden In Certain Situations (Angular 8)
Expected behavior
I implemented the flipping card as shown on the docs. The flipping card works in Angular 8, but only in certain situations. The expected behavior is that the back of the card will always show when flipping the card. The expected behavior is this considering the back of card element is in the DOM even though it is invisible when I trigger toggle().
Actual behavior
The back of the flipping card does not always show as visible. I have found if I navigate to the page it is on using a routerLink then it does not show the back of the card once it animates flipping. If I refresh that same page though then it will allow me to see the flip side of the card. The elements are in the DOM, they are just hidden once the animation happens. I have multiple flipping cards but they are each contained within their own component that I add to a page using ngFor.
Resources (screenshots, code snippets etc.)
The template for the flipping card was taken from the docs. It is not that it does not work in a base state, it is that it does not work in the way I am using it, and I think it should be. I have one flipping card each inside of its own components. The components containing one flipping card each are then rendered to the page using ngFor with ngSwitch. The template reference variables for each #card are all contained within their own component so should have different scopes if I am not mistaken.
I can provide a web page that has this implementation and exhibits this odd behavior, but I would rather email it than post on a public forum. Can you provide me your email address? I will also try to find it and reference this post in my email with the web address.
Thank you, Eric
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.1.1
- Device: Surface
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
ewgiddings free commented 4 years ago
Ok, I cannot seem to find a support email. Can you please provide me an email address to send the website that is having this issue to? I can also provide you the html files for the two pages (they are relatively simple).
I think with the website showing the issue, and the html files, maybe someone would be able to help me. Again though I do not want to post it on this forum so an email address to communicate would support there would be greatly appreciated.
Thanks!
Arkadiusz Idzikowski staff commented 4 years ago
You can send the url/files to a.idzikowski@mdbootstrap.com
tano pro commented 4 years ago
I have the same issue. The backside never shown for me and no error. I only copied the example into my page. I use ng8 also.
Arkadiusz Idzikowski staff commented 4 years ago
We couldn't reproduce this problem on the simple example from the documentation. Did you just copy the flipping card code to the fresh new app, or do you use some kind of routing like @ewgiddings mentioned?
tano pro commented 4 years ago
Ok, I can narrow the problem. Somehow it is related to the mdb-carousel. I have mdb-card in every item and if mdb-body is present than the flipping does not work. The flipping cards are not in carousel they are in different place on the screen. If I replace the mdb-card in carousel item to div with class="card", works as expected. I hope this helps a little.
Bartosz Termena staff commented 4 years ago
Dear @tano
This problem will be fixed in the next version.
Best, Bartosz.