Rotating Cards in MDB Angular


Topic: Rotating Cards in MDB Angular

Louw pro asked 5 years ago

Does MDB Angular support Rotating Cards ? I don't find it under the Components-Cards options, but there is a reference under the "Team" Sections - example 4. Regards

Louw pro commented 5 years ago

OK, I've found the "Rotating Cards" under Extended features, but can't get the sample to work in my environment. I've used the Pro zip boilerplate, as I have not yet received response from mail sent on how to install Pro via npm.

Dawid Adach pro commented 5 years ago

Dear Louv, your account for npm install has been cretaed. Please check activation mail and follow 5 mins quick start guide. As per component, please attach sample code which doesn't work.

Alberto pro answered 5 years ago

This code works on my project. Maybe you can compare and find what the problem is in yours. It also helps if you include code instead of just wondering if something works  
Start your code here
<divclass="row">
<!--Section cards-->
<div *ngFor="let teamcard of teamCards | async"class="col-lg-4 col-md-4 mb-r">
<mdb-card-rotating #cards1>
<!--Front Side-->
<divclass="face front tp-box_side tp-box_front">
<!-- Image-->
<divclass="card-up">
<imgsrc="/assets/images/backgrounds/{{teamcard.background}}"class="img-fluid">
</div>
<!--Avatar-->
<divclass="avatar"><imgsrc="/assets/avatars/{{teamcard.avatar}}"class="rounded-circle img-responsive">
</div>
<!--Content-->
<divclass="card-body">
<h4>{{teamcard.name}}</h4>
<p>{{teamcard.role}}</p>
<!--Triggering button-->
<aclass="rotate-btn"data-card="card-1" (click)="cards1.toggle()"><iclass="fa fa-repeat"></i> Click here to rotate</a>
</div>
</div>
<!--/.Front Side-->
<!--Back Side-->
<divclass="back tp-box_side tp-box_back">
<!--Content-->
<h4>About me</h4>
<hr>
<p>
{{teamcard.blurb}}
</p>
<hr>
<!--Social Icons-->
<ulclass="inline-ul">
<li *ngFor="let socialLink of teamcard.sociallinks">
<aclass="icons-sm fb-ic"><iclass="fa fa-facebook"></i></a>
</li>
</ul>
<!--Triggering button-->
<aclass="rotate-btn"data-card="card-1" (click)="cards1.toggle()"><iclass="fa fa-undo"></i> Click here to rotate back</a>
</div>
<!--/.Back Side-->
</mdb-card-rotating>
</div>
<!--Grid column-->
</div>

Louw pro commented 5 years ago

Hi Alberto, Thanks you for your assistance - I've rebuild Docker image to the version of -cli as per Quick start, and it works for me now. Regards

FREE CONSULTATION

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

Status

Closed

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