Ionic: Sticky button at the bottom of a particular ion-slide - css

Question

I am generating a bunch of slides with questions; The last slide is an overview of the previous answered questions. On the bottom I have a submit button that I want to always be visible on that (last) slide at the bottom of the page.
I tried the following:
Use a ion-fab-button, which doesnt stick.
Use CSS with "position: sticky !important;" on the button
Wrap everything but the button in a ion-card-content
<ion-slide>
<ion-card>
<h1>Questions Overview</h1>
<ion-list *ngFor="let question of questions">
<ion-item>
<ion-label>
Question: {{ question.question }}
</ion-label>
</ion-item>
<ion-item>
<ion-label>
Your Answer: {{ question.answer }}
</ion-label>
</ion-item>
</ion-list>
<ion-button (click)="onSubmit()" expand="full">Submit</ion-button>
</ion-card>
</ion-slide>
I am not that experienced in the framework so I dont if there is something else I could try.
When using google I only found questions and answers about buttons outside of ion-content. This doesnt help since everything used on the page is in ion-content and if I would do it this way the button will also be shown on all the other slides.
Edit:
TL;DR Workaround:
#ViewChild('slides', {read: IonSlides}) slides: IonSlides; in .ts file
Use Event (ionSlideReachEnd)="onEnd()" on <ion-slides> in .html
onEnd() {
this.slides.isEnd().then(endReached => {
this.reachedEnd = endReached // reachedEnd is a variable that can be checked in the html file
}
I have used a workaround until I find a proper solution. I use the above used code to check if I have reached the end of my slides. After this I display a ion-footer which contains the button. The footer is stickied on the bottom of the page and not to the slides like I want to have it. The additional bonus is that now the user always has the ability to submit on any slide when reviewing his answers.

Answer 1

A simple *ngIf can do the job for you... so we put the condition that the button will only be visible on the last slide, we know that the array index of the last slide will be equal to the length of the array -1... hence we put the condition: <ion-button *ngIf='idx==questions.length-1' (click)="onSubmit()" expand="full">Submit</ion-button>
relevant HTML:
<ion-content padding>
<ion-slides>
<ion-slide *ngFor="let question of questions; let idx = index">
<ion-card>
<h1>Questions Overview</h1>
<ion-list>
<ion-item>
<ion-label>
Question: {{ question.question }}
</ion-label>
</ion-item>
<ion-item>
<ion-label>
Your Answer: {{ question.answer }}
</ion-label>
</ion-item>
</ion-list>
<ion-button *ngIf='idx==questions.length-1' (click)="onSubmit()" expand="full" style='border:2px solid red;padding:5px; margin:5px; background:lightpink; position: absolute; bottom: 0%; left:50%; margin-left:-17px'>Submit</ion-button>
</ion-card>
</ion-slide>
</ion-slides>
</ion-content>
check the about tab on the working stackblitz here