I was trying to build the swiping cards(as tinder cards). The cards are not displayed as(stackof cards)
But instead, they are displayed as one after another.
Can anyone know why it is happening like this?
This is my code.
<div swing-stack #myswing1 [stackConfig]="stackConfig" (throwoutleft)="voteUp(false)" (throwoutright)="voteUp(true)" id="card-stack" >
<ion-card #mycards1 swing-card *ngFor="let job of jdetails">
<div >
<img src="assets/imgs/lap.jpg" (click)="openPage()" id="tagimg">
<div class="textoncard title" >{{ job.company }}</div>
<div class="textoncard subt">{{ job.jobtitle }}</div>
<div class="textoncard time">2 days ago</div>
</div>
<ion-card-content>
<table>
<tr>
<td class="label">Location</td>
<td class="des">{{ job.location }}</td>
</tr>
<tr>
<td class="label">Type</td>
<td class="des">{{ job.jobtype }}</td>
</tr>
<tr>
<td class="label">salary</td>
<td class="des">{{ job.jobtype }}</td>
</tr>
<tr>
<td class="label">Description</td>
<td class="des">{{ job.jobdescrition }}</td>
</tr>
<tr>
<td class="label">Source</td>
<td class="des"><p style="color: purple;font-weight: bold;">Monster</p></td>
</tr>
</table>
<div id="endbtn">
<ion-buttons class="ionrow">
<button ion-button icon-only clear (tap)="tapEvent($event)" [ngStyle]="{'color': buttonColor}">
<ion-icon name="ios-heart"></ion-icon>
</button>
<button ion-button icon-only clear style="color: black" id="sharebtn">
<i class="fas fa fa-share-alt custom-share"></i>
</button>
</ion-buttons>
</div>
</ion-card-content>
</ion-card>
</div>
export class FeedsPage {
@ViewChild('myswing1') swingStack: SwingStackComponent;
@ViewChildren('mycards1') swingCards: QueryList<SwingCardComponent>;
stackConfig: StackConfig;
recentCard: string = '';
cards: Array<any>;
jdetails: any;
constructor(public jobdetail: JobsDataProvider
)
{
this.stackConfig = {
throwOutConfidence: (offsetX, offsetY, element: any) => {
return Math.min(Math.abs(offsetX) / (element.offsetWidth/2), 1);
},
transform: (element, x, y, r) => {
this.onItemMove(element, x, y, r);
},
throwOutDistance: (d) => {
return 800;
}
};
}
ionViewDidLoad() {
console.log('ionViewDidLoad FeedsPage');
this.jobdetail.getJobDetails().then((data) => {
console.log(data);
this.jdetails = data;
});
}
ngAfterViewInit() {
// Either subscribe in controller or set in HTML
this.swingStack.throwin.subscribe((event: DragEvent) => {
event.target.style.background = '#ffffff';
});
}
onItemMove(element, x, y, r) {
let color = '';
const abs = Math.abs(x);
const min = Math.trunc(Math.min(16 * 16 - abs, 16 * 16));
const hexCode = this.decimalToHex(min, 2);
if (x > 0) {
color = '#' + hexCode + 'FF' + hexCode;
} else {
color = '#FF' + hexCode + hexCode;
}
element.style.background = color;
element.style['transform'] = `translate3d(0, 0, 0) translate(${x}px, ${y}px) rotate(${r}deg)`;
}
decimalToHex(d, padding) {
let hex = Number(d).toString(16);
const numPadding = typeof (padding) === 'undefined' || padding === null ? 2 : padding;
while (hex.length < numPadding) {
hex = '0' + hex;
}
return hex;
}
}
I want them to be the stack format as shown in the first image. Can someone figure out what is the mistake I’m doing?
For buiding this i’m taking the reference from swiping cards in ionic 2