Angular Reactive Forms - FormArray start from another index

Question

I have an invoice template and want to start from another index on the second page, if the service fields doesnt fit on the first page anymore. For example if 12 service fields were created on the 1st page than please add a new service object on the 2nd page (13th element). Right now, it shows the first element from the formArray on the 2nd page. I use the reactive form with formArray.

Please take a look in my code on Stackblitz: https://stackblitz.com/edit/angular-invoice?file=src/app/app.component.html

I have created for the second page and further pages another template:

<ng-template #sndPage>
        <div id="{{ i+1 }}" class="page">
            <div class="content">
                <div resizeObserver (resize)="onResize($event)">
                    <h1>Another Page</h1>
                    <form [formGroup]="invoiceForm" (ngSubmit)="onSubmit()">
                        <div class="service-table" formArrayName="services">
                            <ng-container 
                                *ngFor="let service of services.controls | slice:13; let j = index;" <- How to change the start index?
                                [formGroupName]="j" 
                            >
                            <div id="service" *ngIf="page.growth; else elseBlock" >   
                                
                                <div class="pos">Pos.: {{page.start + j+1}} </div>
                                <textarea 
                                    class="title"
                                    formControlName="title"

                                    autosize
                                    [minRows]="1"

                                    placeholder="Caption2"
                                >
                                </textarea>
                                <textarea 
                                    class="detail"
                                    formControlName="detail"

                                    autosize
                                    [minRows]="1"

                                    placeholder="Describe2"

                                >
                                </textarea>
                                <div class="price">
                                    <input
                                        class="price"
                                        formControlName="price"
                                        AutoSizeInput
                                        placeholder="Price"
                                    >
                                </div>
                            </div>
                            <ng-template #elseBlock>
                                <div id="service" *ngIf="page.start + j < page.lastServiceElement">   
                                
                                    <div class="pos">Pos.: {{page.start + j+1}}</div>
                                    <textarea 
                                        class="title"
                                        formControlName="title"

                                        autosize
                                        [minRows]="1"

                                        placeholder="caption2"
                                    >
                                    </textarea>
                                    <textarea 
                                        class="detail"
                                        formControlName="detail"

                                        autosize
                                        [minRows]="1"

                                        placeholder="Describe2"

                                    >
                                    </textarea>
                                    <div class="price">
                                        <input
                                            class="price"
                                            formControlName="price"
                                            AutoSizeInput
                                            placeholder="Price"
                                        >
                                    </div>
                                </div>
                            </ng-template>
                        </ng-container>
                        <button mat-icon-button type="button" color="accent" *ngIf="page.growth" (click)="addService()"> 
                            <mat-icon>add_circle_outline</mat-icon>
                        </button>
                        </div>
                        <button type="submit" [disabled]="!invoiceForm.valid">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </ng-template>

Also I guess that the slice pipe doesnt work for formArray. I set the number (13) only for testing.

Bonus: If the "last" service description field doesnt fit on the first page, is there a good way to continue with the description field on the next page?