Being able to push new cards to the stack under the existing one

[numerized]

To keep DOM memory low I need to load cards two by two.

The process is working well when I use one card at a time, but when I want to display one draggable card and one card under the draggable one a push or unshift onto the cards array is making the new card appearing on top of the card currently dragged or on top of the second card wherein should appear under it.

Have you been able to lazy load cards at the back of the stack ?? no matter what I do the card appear at the top of the stack and it's very annoying ...

no matter if I push or unshift the next card appear on top of the existing one...

[XPanniX]

Now I really found a workaround for this thanks to JB on disqus.
Have a look at his solution using z-index and appending elements to the front of the card array:

Edit: Integration of angular2-swing is based on this tutorial

[tobiasmuecksch]

Thank you very much for sharing your solution @XPanniX ! It works perfectly.

I think this should be part of the README.md!

[XPanniX]

You're welcome @tobiasmuecksch
Since this feels a bit "hacky" and I'm not sured if this will be fixed/implemented in the future I searched for an alternative and found ng2-swipe-cards which works great and looks even better since it doesn't use the z-index manipulation.

In case this kind of "advertisement" isn't wanted here feel free to delete my comment or tell me and I will do it.

[tobiasmuecksch]

@XPanniX Thank you for your opinion!

[gauravparmar]

I created a workaround for this after experimenting with it. It is a hack which you may use to achieve this functionality of pushing new card below the stack. After struggling a lot with the behavior of Swing card stack, I noticed that the card pushed at last will always be on the top in the stack causing the issue, no matter if you push it to the beginning or at the end of the stack.
To get past this issue. You need to pop all the existing cards in the stack in temporary variable before pushing a new one and then push a new card. Post that you need to push back all the old cards on top of it again to gain the old sequence. So e.g.- If you had card A, B & C earlier and now you are popping out card C and pushing card D in the stack. Below is what you need to follow-

1. Pop card C from top
2. Pop card B from top and store in a temporary variable say - temp_B
3. Pop card A from top and store in a temporary variable say - temp_A
4. Push new card D in the stack
5. Push old card temp_A in the stack
6. Push old card temp_B in the stack

After doing so, you will have card stack with the sequence like - [D, A, B] and since B is pushed at last it will be shown on the top which was supposed to be shown on top after removing card C which is correct. Also after swiping B, you will get A and then D and so on.

This is a very beginner level solution but makes you achieve what you want.

[aureljah]

I know it's way too late, but i had the same issue and came across this page.
The solution with z-index and trackBy mentioned by others didn't work for me, but after some search, i've found a (proper?) solution.

Just add prepend="true" to this line:
<div #mycards1 swing-card *ngFor="let c of cards ; let i = index" class="cards" prepend="true">

It will basically reverse the use of cards array so that this.cards[0] should be always displayed on top and you will also have to use this.cards.push() to add a new cards at the back of the displayed cards.

More details: I don't know why but the stack of cards (in SwingStackComponent) seems to always add new cards at the top regardless of the order of my cards array. I think when the swing component detect that my cards array has changed and there is a new element it will use createCard() (inside "swing" module) which default behavior is to add the card on top of the stack. Hopefully they've added a parameter "prepend" to it to force swing to add a card at the back of the stack.

In my case it seems to work fine as i only have to push cards at the back.
However i don't think this will work if you need both add new cards at the top and at the back, this will require more tweaking.

Hope this help.