Rotating Cards in MDB Angular PRO

Topic: Rotating Cards in MDB Angular PRO

Jan Louw pro asked 6 years ago

Hi, Is there a way to pass data between the "front card" canvas to the "back card" canvas on the "click" event? I have a Table data structure, and depending on which row of the table being clicked, I want to publish different data on the back of the Rotating Card canvas. Appreciate any assistance. Regards Jan

Jan Louw pro commented 6 years ago

Hi Damian, Thank you for assisting. I'll look at redesign / alternative way forward. Regards

Damian Gemza staff commented 6 years ago

Let me know if you achieve something which works as you expect. Best Regards, Damian

Add comment

Jan Louw pro answered 6 years ago

0 0 Best answer

<p>Damian, code as requested. Regards.</p>
<p>==================<br />
Component.html code:<br />
==================</p>
<pre><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></pre>
<p>================<br />
Component.ts code:<br />
================</p>
<pre>import { Component, OnInit, ViewChild } from '@angular/core';
import { CardRotatingComponent } from 'ng-mdb-pro/pro/cards/card-rotating.component';</pre>
<pre>@Component({
 selector: 'app-welcome',
 templateUrl: './welcome.component.html',
 styleUrls: ['./welcome.component.scss']
 })
 export class WelcomeComponent implements OnInit {
 @ViewChild('cards') cards: CardRotatingComponent;</pre>
<pre>dbOverViewLst: [{
 appname: string,
 appDesc: string,
 dbs: [{ name: string,
 size: number,
 state: boolean,
 }]
 }];
 selAppDB: string;
 selApp: string;</pre>
<pre>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() {
 }</pre>
<pre>rowClicked(ida: number, idx: number) {
 this.selAppDB = this.dbOverViewLst[ida].dbs[idx].name;
 this.selApp = this.dbOverViewLst[ida].appname;
 this.cards.toggle();
 }
 }</pre>

Please insert min. 20 characters.

Damian, code as requested. Regards.

==================
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();
 }
 }

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Hello Louw,

It's super-easy to achieve your desired situation.

My code is a very primitive example, but works in way which you need it. On front of card there's 3 buttons with different (click) methods. Each click event method pushes different HTML markup to reverse of your card.

.html code:
<div>
<pre>

<mdb-card-rotating #cards>

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

</div>

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

</div>

</mdb-card-rotating>

</div>

</pre>
</div>
.ts code:
<div>
<pre>// imports

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

// class</pre>
</div>
<div>
<div>
<pre>@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>"

}</pre>
</div>
</div>
<div>
<div></div>
</div>
Try to repeat ts logic in your case.

Best Regards,

Damian

Please insert min. 20 characters.

Hello Louw, It's super-easy to achieve your desired situation. My code is a very primitive example, but works in way which you need it. On front of card there's 3 buttons with different (click) methods. Each click event method pushes different HTML markup to reverse of your card. .html code:

<!--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-->

.ts code:

// 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>"

}

Try to repeat ts logic in your case. Best Regards, Damian

Jan Louw pro commented 6 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 6 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.

Jan Louw pro commented 6 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 6 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

Jan Louw pro commented 6 years ago

Damian, sample code that describes what I'm trying to achieve. ================== Component.html code: ==================    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">  <mdb-card-rotating #{{approws.appname}}>  <div class="face front tp-box_side tp-box_front" style="height: auto">  <div class="card-body px-0"> <h4 class="card-title">{{approws.appDesc}}</h4> <hr> <p>Overview of {{approws.appname}} Databases</p>  <table class="table table-sm">  <thead> <tr> <th>DBNAME</th> <th>DBSIZE</th> <th>STATUS</th> </tr> </thead>   <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>  </div> </div>   <div class="back tp-box_side tp-box_back" style="height: auto">  <h4>Summary: {{selApp}} ({{selAppDB}})</h4> <hr> <p>Display summary KPI's for database {{selAppDB}}</p>  <a class="rotate-btn" data-card="card-1" (click)="cards.toggle()"><i class="fa fa-undo"></i> Overview</a> </div>  </mdb-card-rotating>  </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, sample code that describes what I'm trying to achieve.

==================
Component.html code:
==================

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">

<mdb-card-rotating #{{approws.appname}}>

<div class="face front tp-box_side tp-box_front" style="height: auto">

<div class="card-body px-0">
<h4 class="card-title">{{approws.appDesc}}</h4>
<hr>
<p>Overview of {{approws.appname}} Databases</p>

<table class="table table-sm">

<thead>
<tr>
<th>DBNAME</th>
<th>DBSIZE</th>
<th>STATUS</th>
</tr>
</thead>


<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>

</div>
</div>


<div class="back tp-box_side tp-box_back" style="height: auto">

<h4>Summary: {{selApp}} ({{selAppDB}})</h4>
<hr>
<p>Display summary KPI's for database {{selAppDB}}</p>

<a class="rotate-btn" data-card="card-1" (click)="cards.toggle()"><i class="fa fa-undo"></i> Overview</a>
</div>

</mdb-card-rotating>

</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();
}
}

```

Please insert min. 15 characters.

Damian Gemza staff commented 6 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 6 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

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Jan Louw

Pro User 118Support score
24Questions 3Answers 0Snippets