Rotating Cards in MDB Angular PRO

<!--Rotating card-->

<div class="col-md-6">

<mdb-card-rotating #cards>

<!--Front Side-->

<div class="face front tp-box_side tp-box_front">

<button class="btn btn-primary waves-light" (click)="data1()" mdbRippleRadius>Data 1</button>

<button class="btn btn-secondary waves-light" (click)="data2()" mdbRippleRadius>Data 2</button>

<button class="btn btn-warning waves-light" (click)="data3()" mdbRippleRadius>Data 3</button>

<a class="rotate-btn"data-card="card-1" (click)="cards.toggle()">

<i class="fa fa-repeat"></i> Click here to rotate</a>

</div>

<!--/.Front Side-->

<!--Back Side-->

<div class="back tp-box_side tp-box_back">

<div #reverse></div>

<a class="rotate-btn"data-card="card-1" (click)="cards.toggle()">

<i class="fa fa-repeat"></i> Click here to rotate</a>

</div>

<!--/.Back Side-->

</mdb-card-rotating>

</div>

<!--/.Rotating card-->

// imports

import { Component, ViewChild, ElementRef } from '@angular/core';

// class

@ViewChild('reverse') reverse: ElementRef;



data1() {

this.reverse.nativeElement.innerHTML="<h1>There's data from 1st button</h1>"

}

data2() {

this.reverse.nativeElement.innerHTML="<h1>There's data from 2nd button</h1>"

}

data3() {

this.reverse.nativeElement.innerHTML="<h1>There's data from 3rd button</h1>"

}

Louw pro commented 7 years ago

Hi Damian, Thank you for responding and providing a way forward. Will it be possible to combine the "button" and "rotating" click action into one action? - in your example, when clicking on the button, it should rotate the card with the relevant button data displaying on the back of the card. Regards Jan

---

Damian Gemza staff commented 7 years ago

Yes, it's possible. You have to also import CardRotatingComponent, add another @ViewChild('cards') cards: CardRotatingComponent and then in data1() method add this.cards.toggle(); It will rotate your card after adding your custom HTML to reverse.

---

Louw pro commented 7 years ago

Damian, it working by importing CardRotatingComponent, but this leads me to an issue where @ViewChild has multiple possible references. Let me try and explain; I generate "Rotating Cards" based on data received from backend - so, some occasions there will be one card and other times there will be multiple cards to be displayed. So, the DOM tag "#cards" in the HTML example for Rotating Cards are like "#{{variable}}" in my case. How will / and if possible, would I code the @ViewChild options to control the rotating of the "active/selected" card?. Regards

---

Damian Gemza staff commented 7 years ago

Could you please show me some example code in which you show me, how do you create those elements ? I need to see, in which way you're creating those flipping cards. Some simple plnkr or example code here. You don't need to show me backend services - I only need to know, how you create another flipping cards. Best Regards, Damian

---

Louw pro commented 7 years ago

Damian, sample code that describes what I'm trying to achieve. ================== Component.html code: ================== <!--Rotating card--> <!--Front Side--> <!--Content-->   Damian, sample code that describes what I'm trying to achieve. ================== Component.html code: ================== `` <div class="row"> <div class="col-lg-3" *ngFor="let approws of dbOverViewLst; let x = index"> <!--Rotating card--> <mdb-card-rotating #{{approws.appname}}> <!--Front Side--> <div class="face front tp-box_side tp-box_front" style="height: auto"> <!--Content--> <div class="card-body px-0"> <h4 class="card-title">{{approws.appDesc}}</h4> <hr> <p>Overview of {{approws.appname}} Databases</p> <!--Table--> <table class="table table-sm"> <!--Table head--> <thead> <tr> <th>DBNAME</th> <th>DBSIZE</th> <th>STATUS</th> </tr> </thead> <!--Table head--> <!--Table body--> <tbody *ngFor="let row of approws.dbs; let i = index"> <tr> <td><a data-card="card-1" (click)="rowClicked(x,i)">{{row.name}}</a></td> <td>{{row.size}}</td> <td>{{row.state}}</td> </tr> </tbody> <!--Table body--> </table> <!--Table--> </div> </div> <!--/.Front Side--> <!--Back Side--> <div class="back tp-box_side tp-box_back" style="height: auto"> <!--Content--> <h4>Summary: {{selApp}} ({{selAppDB}})</h4> <hr> <p>Display summary KPI's for database {{selAppDB}}</p> <!--Triggering button--> <a class="rotate-btn" data-card="card-1" (click)="cards.toggle()"><i class="fa fa-undo"></i> Overview</a> </div> <!--/.Back Side--> </mdb-card-rotating> <!--/.Rotating card--> </div> </div> ` ================ Component.ts code: ================ ` import { Component, OnInit, ViewChild } from '@angular/core'; import { CardRotatingComponent } from 'ng-mdb-pro/pro/cards/card-rotating.component'; @Component({ selector: 'app-welcome', templateUrl: './welcome.component.html', styleUrls: ['./welcome.component.scss'] }) export class WelcomeComponent implements OnInit { @ViewChild('cards') cards: CardRotatingComponent; dbOverViewLst: [{ appname: string, appDesc: string, dbs: [{ name: string, size: number, state: boolean, }] }]; selAppDB: string; selApp: string; constructor() { this.dbOverViewLst = [ { appname: 'TEST1', appDesc: 'TEST1', dbs: [ { name: 'FILLER', size: 1, state: true }, { name: 'FILLER', size: 1, state: false }, ] }, { appname: 'TEST2', appDesc: 'TEST2', dbs: [ { name: 'FILLER', size: 1, state: true }, { name: 'FILLER', size: 1, state: false }, ] }, ]; } ngOnInit() { } rowClicked(ida: number, idx: number) { this.selAppDB = this.dbOverViewLst[ida].dbs[idx].name; this.selApp = this.dbOverViewLst[ida].appname; this.cards.toggle(); } } ``

---

Damian Gemza staff commented 7 years ago

Could you place your code not in comment but in new post in this topic? And please use special "code" formatting - it will help me to understand your code.

---

Damian Gemza staff commented 7 years ago

Dear Jan, I'm sorry, but for now, I don't see a way, in which you can achieve desired behavior. We have to rebuild our Flipping Cards component so we can rotate it in another way. But it will be done in future, not now. Best Regards, Damian

---

<div class="row">
<div class="col-lg-3" *ngFor="let approws of dbOverViewLst; let x = index">
<!–Rotating card–>
<mdb-card-rotating #{{approws.appname}}>
<!–Front Side–>
<div class="face front tp-box_side tp-box_front" style="height: auto">
<!–Content–>
<div class="card-body px-0">
<h4 class="card-title">{{approws.appDesc}}</h4>
<hr>
<p>Overview of {{approws.appname}} Databases</p>
<!–Table–>
<table class="table table-sm">
<!–Table head–>
<thead>
<tr>
<th>DBNAME</th>
<th>DBSIZE</th>
<th>STATUS</th>
</tr>
</thead>
<!–Table head–>
<!–Table body–>
<tbody *ngFor="let row of approws.dbs; let i = index">
<tr>
<td><a data-card="card-1" (click)="rowClicked(x,i)">{{row.name}}</a></td>
<td>{{row.size}}</td>
<td>{{row.state}}</td>
</tr>
</tbody>
<!–Table body–>
</table>
<!–Table–>
</div>
</div>
<!–/.Front Side–>
<!–Back Side–>
<div class="back tp-box_side tp-box_back" style="height: auto">
<!–Content–>
<h4>Summary: {{selApp}} ({{selAppDB}})</h4>
<hr>
<p>Display summary KPI's for database {{selAppDB}}</p>
<!–Triggering button–>
<a class="rotate-btn" data-card="card-1" (click)="cards.toggle()"><i class="fa fa-undo"></i> Overview</a>
</div>
<!–/.Back Side–>
</mdb-card-rotating>
<!–/.Rotating card–>
</div>
</div>

import { Component, OnInit, ViewChild } from '@angular/core';
import { CardRotatingComponent } from 'ng-mdb-pro/pro/cards/card-rotating.component';

@Component({
 selector: 'app-welcome',
 templateUrl: './welcome.component.html',
 styleUrls: ['./welcome.component.scss']
 })
 export class WelcomeComponent implements OnInit {
 @ViewChild('cards') cards: CardRotatingComponent;

dbOverViewLst: [{
 appname: string,
 appDesc: string,
 dbs: [{ name: string,
 size: number,
 state: boolean,
 }]
 }];
 selAppDB: string;
 selApp: string;

constructor() {
 this.dbOverViewLst = [
 { appname: 'TEST1',
 appDesc: 'TEST1',
 dbs: [
 { name: 'FILLER', size: 1, state: true },
 { name: 'FILLER', size: 1, state: false },
 ]
 },
 { appname: 'TEST2',
 appDesc: 'TEST2',
 dbs: [
 { name: 'FILLER', size: 1, state: true },
 { name: 'FILLER', size: 1, state: false },
 ]
 },
 ];
 }
 ngOnInit() {
 }

rowClicked(ida: number, idx: number) {
 this.selAppDB = this.dbOverViewLst[ida].dbs[idx].name;
 this.selApp = this.dbOverViewLst[ida].appname;
 this.cards.toggle();
 }
 }