Virtual Scroll - Remove/Hide footer from the list

Ionic Framework ionic-v3
1

Hi,

I try to remove a footer in virtual scroll.

<ion-list [virtualScroll]="arrayArticles" approxItemHeight="200px"
              approxHeaderHeight="0px" approxFooterHeight="0px"
              [footerFn]="showFooter">        
        <ion-card  *virtualItem="let article;let idx = index" (click)="itemTapped($event, article)" 
                  (swipe)="articleSwipeEvent(article,$event, idx)" >
            <ion-img [src]="article.imageSrc" class="listImg" (load)="logDebug()" ></ion-img>
            <div [innerHTML]="article.title"></div>
            <div [innerHTML]="(article.publishedDate | amTimeAgo) + ' on ' + article.sourceTitle"></div>
            
        </ion-card>
       
        <ion-card [ngClass]="{'hideIonCard': Footer_Show == false}"  *virtualFooter="let footer"
            <img src="../../../img/smart.jpg" class="listImg">
            <ion-card-content>
                <p>My Ion-car when index=10</p>
            </ion-card-content>

            <ion-item class="bottom">
                <button light clear item-left (click)="RemoveCard_Footer()">
                    <div>Remove</div>
                </button>
            </ion-item>

        </ion-card>
</ion-list>

I use footer to add a specific card when index=10

the function RemoveCard_Footer() set Footer_Show= false.

I hide the footer with [ngClass]=“{‘hideIonCard’: Footer_Show == false}”

.hideIonCard { display:none; }

=> item disappears from the list, the scroll position is retained. But the next elements does not go up in the list, there is blank space.

How can i remove footer dynamically?

or may be a better solution to add this specific card at index 10 and remove it from the list.